Bootstrap Grid Example: Extra Tips and Tricks for Your Grid Systems

In this set of tutorials meant to introduce Bootstrap 4 to you, we covered a lot of different functionalities and methods. If you have been reading them, following our tips and studying Bootstrap grid examples provided, you should feel pretty solid in the Bootstrap grid department by now.

We have discussed all the most important features, the correct usage of various utility classes and ways to use, modify and style grid systems. In this tutorial, we'll introduce a few more Bootstrap grid examples and show you some useful tricks.

Bootstrap Grid Example: Main Tips

• Bootstrap grid system offers a set of responsive classes. Using them, you can specify what screens a certain layout works on.
• This tutorial will show a few examples of how the Bootstrap grid layouts can be modified.

Equal Columns

The most basic way to make your Bootstrap columns equal is by simply specifying each of them to span through an equal amount of columns:

<div class="row">
 <!-- columns with specific widths -->
 <div class="col-4" style="padding: 20px; background-color: violet;">span 4</div>
 <div class="col-4" style="padding: 20px; background-color: khaki;">span 4</div>
 <div class="col-4" style="padding: 20px; background-color: violet;">span 4</div>
 </div>

There's also an alternative way: you can make the amount of columns that a grid column spans though be calculated automatically.

Below you'll see the possible variations in which the width of the columns is calculated automatically. The upside of this method is that you merely need to specify the responsive class (in this case, col) without specifying how many columns each column container should span through:

<div class="row">
<!-- columns with automatic widths -->
<div class="col">span 4</div>
<div class="col">span 4</div>
<div class="col">span 4</div>
</div>

You may as well specify the width for some columns and don't do it for others. In such a case, the undefined ones will adjust to the ones with a width indicated.

Review the Bootstrap grid example below to see two columns adjust around a column with a specified width:

<div class="row">
<!-- one column with specific with surrounded with automatic width columns -->
<div class="col">span 2</div>
<div class="col-8">span 8</div>
<div class="col">span 2</div>
</div>

Nesting Columns

Nesting refers to placing Bootstrap columns inside other columns. Since the column width is defined in percentage values, fitting columns into each other doesn't cause problems:

<div class="row">
<div class="col-6">
<!-- column nested inside the column container -->span 6
<div class="col-12">span 12</div>
</div>
<div class="col-6">span 6</div>
</div>

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Mix and Match

The mix and match method is useful for setting Bootstrap grid layouts for specific screen sizes. It can be done in two easy steps:

• First, set multiple column classes with different screen size prefixes.
• Then, define how many Bootstrap columns a particular column container should span through at that particular screen size.

See the Bootstrap grid example to get a better idea:

<div class="row">
<!-- columns with specific layout settings for different screen sizes -->
<div class="col-md-7 col-lg-6 col-sm-2">span 6 on large, 7 on medium, 2 on small</div>
<div class="col-md-5 col-lg-6 col-sm-10">span 6 on large, 5 on medium, 10 on small</div>
</div>

Stacked-To-Horizontal

Using Bootstrap 4, you can easily create grids that react to the screen size and get their columns displayed accordingly (either in horizontal order, or stacked). They are also called stacked-to-horizontal grids:

<div class="row">
     <div class="col-sm" style="padding: 20px; background-color: violet;">col-sm</div>
     <div class="col-sm" style="padding: 20px; background-color: khaki;">col-sm</div>
     <div class="col-sm" style="padding: 20px; background-color: violet;">col-sm</div>
   </div>
</div>

Removing Gutters

While gutters help keep the columns separate, sometimes you need a clean look. In such a case, you may remove gutters from your Bootstrap layouts. The class you should be using is called no-gutters.

In result, negative margins from row and horizontal padding from all direct children columns will disappear too:

<div class="row no-gutters">

Bootstrap Grid Example: Summary

• Using responsive classes provides you with flexibility and ease when working with Bootstrap grid systems.
• Knowing the right methods, you can make sizing, styling and otherwise modifying your Bootstrap layouts much easier.