Bootstrap Grid: Mastering the Most Useful Flexbox Properties

In this article, I’ll introduce you to the key Bootstrap CSS classes for building layouts with the Bootstrap grid system.

Bootstrap 4 uses Flexbox as the basis for its grid system. I’ll explain the Flexbox CSS properties that underlie the new grid’s functionality, and define how the Bootstrap flex utility classes work to help you build awesome layouts quickly and painlessly.

What is Flexbox?

Let’s first introduce Flexbox. It stands for flexible box, and it’s a cutting-edge CSS layout system that makes it easy to create layouts for dynamic or unknown screen sizes. (The flex container has the ability to adjust and control the size of its child elements to adapt to different viewports.)

You can easily create a Flexbox layout using a set of CSS properties designed for this task.

Bootstrap makes it even easier to create Flexbox-based layouts by providing a set of wrapper classes on top of Flexbox properties, which you can simply apply to your markup to achieve your desired result.

Introduction to the Bootstrap Grid System

Grid systems are an important element of a CSS framework, since building complex layouts without a powerful and flexible grid system can be an intimidating task.

Among the new features of the latest Bootstrap grid system, you’ll find the xl (extra large) grid breakpoint, corresponding to an extra large screen size, and the use of Flexbox instead of floats as the underlying layout mechanism.

Key Classes of the Bootstrap Grid System

You can build a layout using Bootstrap’s grid system by applying a bunch of Bootstrap classes: .container, .row and .col-*-*. (The first * in .col-*-* needs to be replaced by the breakpoint specifier — such as xs, sm, md, lg, xl — and the second * needs to be filled with the column span size. The sum of all columns has to be equal to 12.)

Let’s now look at the core components of the Bootstrap grid.

Container

The container is the outer wrapper for the grid layout. It’s a div that has either the class .container for fixed width or .container-fluid for a 100% full width.

Row

A row serves as a logical container for columns.

Column

A column is what makes a block in the grid. It should be contained in a row.

The Bootstrap grid system provides these additional column classes:

  • .col-xs-*: designed for extra small screens of less than 576px width
  • .col-sm-*: designed for small screens with the width equals to or greater than 576px
  • .col-md-*: designed for medium screens with the width >= 768px
  • .col-lg-*: designed for large screens with the width >= 992px
  • .col-xl-*: designed for extra large screens that have a width that equals to or is greater than 1200px.

You don’t need to add multiple classes if you want to specify the same width for different screen sizes; just add the class with the smallest breakpoint. So, for example, instead of .col-sm-6 and .col-md-6, you only need to apply .col-sm-6.

Bootstrap Grid Layouts with Flexbox vs Floats

Thanks to Flexbox, you can easily achieve things like same-height columns or same-width columns, which you could only accomplish with CSS hacks before.

CSS float and clearfix techniques to build layouts have been among such hacks, which made it hard to build and debug complex layouts.

For example, consider a two-column layout. If you build this layout with Bootstrap 3, it will look like this:

See the Pen Bootstrap 3 2-Column Layout by SitePoint (@SitePoint) on CodePen.

If you build the same layout with Bootstrap 4, this is what you have:

See the Pen Bootstrap 4 2-Column Layout by SitePoint (@SitePoint) on CodePen.

With Bootstrap 4 and its flexbox-based grid, you achieve a more realistic column (just like in a table), as columns in the same row will take the same height.

Let’s tackle same-width column layouts. Thanks to Flexbox, you can easily divide the available space between multiple columns in the same row. If you create a grid layout with multiple columns without specifying the column width (i.e using the .col-* classes), the available space will automatically and equally be divided among those columns.

Here’s an easy and quick example:

.col
.col
.col
.col

The four instances of .col-sm will each automatically be 25% wide from the small breakpoint and up.

With some minimal styling, here’s what you get:

Continue reading %Bootstrap Grid: Mastering the Most Useful Flexbox Properties%

Powered by WPeMatico