Step by Step Tutorial for Creating a Perfect Horizontal Grid

If you have been following our tutorials, you already have some knowledge on Bootstrap grid systems and how they work. To become a professional developer, you should also have great skills at using them in practice.

In the following tutorials, we will be analyzing examples and leading you through every step of creating Bootstrap grids yourself. In this first part, you will make a Bootstrap stacked-to-horizontal grid.

As it adapts to the screen size, the columns of this grid are displayed either in horizontal order or stacked over each other. To do that, we must understand how to use the Bootstrap grid to put elements side by side.

Horizontal Grid: Main Tips

• Stacked-to-horizontal grid adapts to the screen size by displaying the columns either stacked or in a horizontal order.
• To create auto layout, the width of a Bootstrap grid column should not be defined.

Creating the Grid

To create a simple responsive grid that switches from stacked to horizontal (and the other way around) depending on the screen size, we need to have Bootstrap multiple containers with appropriate responsive classes.

Let's try to create a three-column layout for our example - one that's similar to this:

For our first step, we must have Bootstrap multiple containers. Let's create three <div> containers inside a container with the .row class. The classes we assign to them begin with the prefix .col-md- because we want them to appear in Bootstrap horizontal align on screens that are bigger than medium size (if they aren't, the columns should be stacked).

Next, we need to decide how many of the twelve columns each of them will span through.

Let's imagine we want the left column to contain a vertical navigation menu, the middle one to contain content and the right column to be left empty in order to position the content in the middle of the screen. In this case, we may want to make the left and right sections span through three columns and the middle to span through six. The HTML for this would look like this:

<div class="container">
  <div class="row">
    <div class="bg-info col-md-3">
      Navigation menu
    </div>
    <div class="bg-primary col-md-6">
      The content
    </div>
    <div class="bg-info col-md-3"> 
      ... 
    </div>
  </div>
</div>

Note: once the screen size gets below medium, the layout will collapse: you'll see the Bootstrap columns not side by side, but spanning the full width of the screen.

Using a container-fluid class <div> would give a different result, as the columns would span across the whole screen, not just a fixed width:

<div class="container-fluid">
  <div class="row">
    <div class="bg-info col-md-3">
      Navigation menu
    </div>
    <div class="bg-primary col-md-6">
      The content
    </div>
    <div class="bg-info col-md-3"> 
      ... 
    </div>
  </div>
</div>

Note: you can turn a fixed-width layout into a fluid layout with the width of 100% by changing the .container class to .container-fluid .

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 50% 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

Auto Layout

Using Bootstrap 4 grid system also allows you to create auto layouts without specifying how many columns a grid column should span. This is done by simply skipping the number for all column containers inside a row container.

In this case, it will be automatically determined how many columns each column element should span through so each of them would be equal and together take up the whole available width:

<div class="row">
<!-- Five 20% wide columns (100% width on screens smaller than medium) --> 
  <div class="bg-primary col-md">Col 1</div>
  <div class="bg-secondary col-md">Col 2</div>
  <div class="bg-primary col-md">Col 3</div>
  <div class="bg-secondary col-md">Col 4</div>
  <div class="bg-primary col-md">Col 5</div>
</div>

Horizontal Grid: Summary

• You can easily make a layout where you Bootstrap columns are stacked on a small screen, yet on larger ones, they are still in Bootstrap horizontal align.
• If you want to create an auto layout, don't define a number of columns that a Bootstrap grid column spans through.