Skip Navigation

[Resolved] Bootstrap 4 col not working.

This support ticket is created 3 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)


This topic contains 2 replies, has 2 voices.

Last updated by Himanshu Agarwal 3 years ago.

Assigned support staff: Shane.


I created a view by using bootstrap class format.

When i am using bootstrap 3 then all col (col-lg-6) are working fine. But when i shift to bootstrap 4 cols are not working fine.

This code i am using in view

<!-- wpv-loop-start -->
<div class="container">
<div class="row">
<div class="picks-content">
<div class="picks-image col-sm-3">[types field='image' title='%%TITLE%%' alt='%%ALT%%' size='full'][/types]</div>

<div class="picks-title-details col-sm-6">
<div class="picks-title col-sm-12">[types field='title'][/types]</div>
<div class="picks-brand col-sm-12">[types field='brand-name'][/types]</div>

<div class="picks-addi-info col-sm-12">
<div class="row">
<div class="picks-more-info col-sm-6">More Info</div>
<div class="picks-why-special col-sm-6">[types field='best-quality'][/types]</div>


<div class="picks-links col-sm-3">
<div class="picks-rating">[types field='rating' ][/types]</div>

<div class="picks-btn-link"><a href="[types field='deal-link' output='raw'][/types]" class="btn">View Deal</a></div>

<!-- wpv-loop-end -->
[wpml-string context="wpv-views"]No items found[/wpml-string]

Please help me to solve this.



Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)


Thank you for getting in touch.

The issue could be the div that you've added between the Row and the First column.

Bootstrap 4 operates a little different from bootstrap 3 in that Boostrap 4 uses flexbox to do the columns while in 3 they use floats.

The extra div you've added could be interfering with the flexbox.

Could you remove it and let me know if the issue still remains ?



My issue is resolved now. Thank you!