O'Reilly logo

Mastering Bootstrap 4 - Second Edition by Jason Marah, Benjamin Jakobus

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Auto-layout of columns

If you are not concerned about viewport-dependent column sizes, then you can use the non-breakpoint-specific column classes: col-*. Using these classes, you can both set equal-width columns and specify your exact column sizes. Using equal-width columns, our aforementioned nested print sizes example will translate into the following (note the use of the unnumbered col class):

<div class="col-6 col-sm-3">   <h5>Extra Large</h5>   <div class="row">      <div class="col">24x36</div>      <div class="col">27x39</div>      <div class="col">27x40</div>   </div></div>

Since this feature also relies on Flexbox, it is important to note the following observation taken from the Bootstrap 4 documentation:

“Equal-width columns can be broken into multiple ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required