Bootstrap 4 column system not working properly

This thread is resolved. Here is a description of the problem and solution.

Problem: When using Bootstrap 4, my grid isn't working as expected. If I use Bootstrap 3, it works.

Solution: Bootstrap 4 prefers you do not use the -xs- grid designator. Just use col-(n) instead. Mobile first!

Relevant Documentation:
https://getbootstrap.com/docs/4.0/layout/grid/

This support ticket is created 5 years, 3 months 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.

Our next available supporter will start replying to tickets in about 2.24 hours from now. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Views, Views plugin

This topic contains 6 replies, has 3 voices.

Last updated by martinH-10 5 years, 3 months ago.

Assisted by: Christian Cox.

Author

Posts

August 29, 2019 at 11:06 am #1327009

martinH-10

I am trying to: use col-sm-3 col-md-6 etc. for custom sizes of columns on mobile, but it doesnt work.

When I change toolset use bootstrap 4 to bootstrap 3 it works.

August 29, 2019 at 2:14 pm #1327135

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Can you clarify what your intention is in terms of how you want the output to be arranged, and what the problem is (i.e. how it appears differently than your intended result)?

The grid system in Bootstrap changed in BS4 (hidden link) to be based on flexbox and it doesn't work the same way as in BS3 (hidden link).

Because the BS class names for different sized screens work on the principle of "this or bigger" then it is redundant to have .col-md-3 if you already have .col-sm-3 and .col-md-6 if you already have .col-sm-6.

August 29, 2019 at 3:14 pm #1327233

martinH-10

Hello, I know the difference, but it does exatcly nothing. Every column is 100% on mobile.

August 29, 2019 at 3:17 pm #1327241

martinH-10

Look this is set as col-sm-2 but it still shows fullwidth..

August 29, 2019 at 3:18 pm #1327251

Christian Cox

With Bootstrap 4, you can drop the "xs-" indicator for the lowest breakpoint:

<div class="row">
<div class="col-2 col-sm-3">Something here</div>
<div class="col-10 col-sm-9">Something else here</div>
</div>

Part of the "mobile first" mentality.

August 29, 2019 at 3:33 pm #1327267

martinH-10

Oh my mistake, sorry.

August 29, 2019 at 3:33 pm #1327269

martinH-10

My issue is resolved now. Thank you!