Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

Bootstrap 4 Grid Tutorial

By Gary simon - Jun 10, 2017

Note:
This tutorial is a part of our free course Learn Bootstrap 4 by Example. Check it out and join in from the beginning!

In any responsive frontend framework, the grid is usually the most used element. In this tutorial, we're going to discover how to use the grid by working on a specific section of the course project that this tutorial is based on.

Understanding the Bootstrap 4 grid is easy once you get the basic concepts. Let's get started!

If you prefer watching a video tutorial

Be sure to Subscribe to the Official Coursetro Youtube Channel for more awesome dev. videos.

An Example

Let's first take a look at the course project's mockup and the specific area of the layout that we will structure with the Bootstrap grid.

In this teal container, we have 3 blips that describe features about this fictional game. Our task is to use the grid to present this in a browser.

Bootstrap's grid is based on a default 12-columns. When you're designing and coding for a layout, it's helpful to think of your layout elements in terms of 12 vertical columns.

Taking the above example, here's how we could situate this layout using 12 columns:

First, we have an icon. This element is small enough to occupy a single column. Then, we have an associated description based on the icon. 

We have 3 of these blips, so with some basic math (4 total columns * 3), it all adds up to 12 columns; which is what we want.

Let's step into our code editor to structure this HTML.

Defining the Grid

Again, this tutorial is based on our Free Bootstrap 4 Course, and we already have a project started. We will be continuing on with this project below, so if you want to follow along from the beginning, start watching from the beginning.

Continuing where we left off from the previous section of the course, add the following HTML outside of any other defined divs and just above the javascript script elements:

<div class="feature-wrapper bg-primary pt-5 pb-5 mt-5 mt-lg-0">
    <div class="container">
        <div class="row">


        </div>
    </div>
</div>

The first div defines a custom class of feature-wrapper so that we can reference it in our own CSS. We're also using bg-primary to give it the background color that's defined as our primary color in the theme. Then, we define some margin and padding (padding-top, padding-bottom, margin-top, margin-bottom). 

Next, because our project is fixed-width, we use a container class and inside of it, a row class. This is where we define the actual grid.

Expanding on the previous example, add:

<div class="feature-wrapper bg-primary pt-5 pb-5 mt-5 mt-lg-0">
    <div class="container">
        <div class="row">
            <!-- First blip -->
            <div class="col-1">
                <i class="fa fa-gamepad fa-2x"></i>
            </div>
            <div class="col-3">
                <p>Play in an immersive environment with your friends.</p>
            </div>
            <!-- Second blip -->
            <div class="col-1">
                <i class="fa fa-gamepad fa-2x"></i>
            </div>
            <div class="col-3">
                <p>Play in an immersive environment with your friends.</p>
            </div>
            <!-- Third blip -->
            <div class="col-1">
                <i class="fa fa-gamepad fa-2x"></i>
            </div>
            <div class="col-3">
                <p>Play in an immersive environment with your friends.</p>
            </div>
        </div>
    </div>
</div>

Note: We're using FontAwesome icons, which explains the <i> elements.

We simply have a class of col-1 and col-3 and repeat it 3 times. This works well on large viewports:

But, it doesn't work well on smaller viewports:

To really make this layout work correctly on all screen sizes, we have to use responsive grid classes.

Making the Grid Responsive

We need to make some adjustments to the classes associated with our icon and text containers. It would be best if all of our columns stacked on top of each other on smaller screen sizes.

To do this, adjust the HTML from the previous example:

<div class="feature-wrapper bg-primary pt-5 pb-5 mt-5 mt-lg-0">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-1 text-center mb-3 mb-md-0">
                <i class="fa fa-gamepad fa-2x"></i>
            </div>
            <div class="col-sm-12 col-md-3 text-center text-md-left text-uppercase mb-3 mb-md-0">
                <p>Play in an immersive environment with your friends.</p>
            </div>
            <div class="col-sm-12 col-md-1 text-center mb-3 mb-md-0">
                <i class="fa fa-sitemap fa-2x"></i>
            </div>
            <div class="col-sm-12 col-md-3 text-center text-md-left text-uppercase mb-3 mb-md-0">
                <p>Play offline or online with our state of the art net system.</p>
            </div>
            <div class="col-sm-12 col-md-1 text-center mb-3 mb-md-0">
                <i class="fa fa-line-chart fa-2x"></i>
            </div>
            <div class="col-sm-12 col-md-3 text-center text-md-left text-uppercase mb-3 mb-md-0">
                <p>Web-based player tracking system for keeping tally of your stats.</p>
            </div>
        </div>
    </div>
</div>

We've added a lot more classes, but the two primary classes to pay attention to are col-sm-12 and col-md-[size].

What we're saying is that on small sm sizes, we want each of these columns to extend to all 12 columns.

Then, a step up from small is medium md, that's when we want these columns to situate themselves in a manner that's consistent with our mockup. So, the icon container receives a class of col-md-1 and the description container receives a class of col-md-3 .

I've also added some text helper classes and margin/padding classes. 

The end-result looks like this on small screen sizes:

 

Conclusion

And that is how the basic responsive grid system works in Bootstrap 4. While this certainly was not an exhaustive look at all of the grid options, you should follow along with our course to gain more experience with the grid!

Note:
This tutorial is a part of our free course Learn Bootstrap 4 by Example. Check it out and join in from the beginning!


Share this post




Say something about this awesome post!