[Resolved] Bootstrap 4 col not working.

[Author]

Posts

[Himanshu Agarwal]

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-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="container">
<wpv-loop>
<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>
</div>

</div>

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

<div class="picks-btn-link">View Deal</div>
</div>

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

Please help me to solve this.

[Shane]

Hello,

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 ?

Thanks,
Shane

[Himanshu Agarwal]

My issue is resolved now. Thank you!