The increasingly demanding access of websites by mobile devices motivated the use of “liquid layouts.”
Liquid layouts are simply the use of relative units instead of fixed units — percentages instead of pixels, and any other relative measurement works, such as the ems unit.
The goal of using liquid layouts is to make it easier to build responsive layouts, to automatically resize, enlarge, or shrink based on screen sizes.
CSS3 modules added solutions similar to this, like Flexbox and grid.
And with the release of Bootstrap v4, a Flexbox-based grid was added.
How It Works
Bootstrap Grid helps your layout elements and align content on the screen. And grand you the ability to put rules on how these layouts behave on different screen sizes.
The main components of Bootstrap Grid are
A single row can have 12 columns maximum; you can group columns to create more full columns for your elements.
As you can see, however you choose to distribute your columns, Bootstrap’s grid system allows up to 12 columns across the width.
Bootstrap comes with four classes to specify column distribution across your with, to create a more dynamic, and flexible layout.
- xs (for phones — width less than 768px)
- sm (for tablets — width equal to or greater than 768px)
- md (for small laptops — width equal to or greater than 992px)
- lg (for laptops and desktops — width equal to or greater than 1200px)
<div class="container"> <div class="row"> <div class="col">1/2</div> <div class="col">1/2</div> </div> </div>
Bootstrap requires a “container” class, it solely holds rows and allows you to set fixed or full width.
<div class="container"> <div class="row"> <div class="col-*"> <p>1/3</p> </div> <div class="col-*"> <p>1/3</p> </div> <div class="col-*"> <p>1/3</p> </div> </div> </div>
The “-*” is a placeholder for the four Bootstrap classes (xs, sm, md, lg)
Replace it with “-sm” and you have three columns distributed across your width. For sm sizes (tablets) and up. Except for xs (phones — width less than 768px) where it automatically stacks on top of each other.
Note that Bootstrap size classes scale up, so if you want to set the same widths for xs, sm, md, and lg, you only need to specify for xs.
Bootstrap Grid system can speed up your UI development time significantly. Although there are more concepts not covered in this article, this should help you get started with a foundation to dive deeper into it.