Search⌘ K
AI Features
Home
Courses
Bootstrap 4 Layouts in Depth

Creating a Grid

Explore how to build responsive web layouts using Bootstrap 4's grid system, including rows, columns, and contextual header and footer elements. Understand how to structure content with images and text spanning specific column widths to create a fluid, scalable design.

We'll cover the following...

Overview

The Bootstrap 4 grid system is entirely responsive and scalable up to 12 columns (depending on the device size) by laying out the website using rows and columns. It has a responsive, mobile-first, and fluid grid architecture that adjusts the columns as the device or viewport size grows.

Let’s begin by adding container-fluid to the header and footer, and the container class to the middle section of our layout.

Create the grid

We can try the changes suggested in the next lesson in the live code environment provided below.

Adding the row and col classes

As mentioned above, we'll create a layout with three rows. Each row contains an image with a span of 4 columns and text with a span of 8 columns.

HTML
<div class="row">
  <!-- We will add total 3 rows -->
  <div class="col-sm-4">
    <!-- Image will take span of 4 col. -->
  </div>
  <div class="col-sm-8">
    <!-- Text will take span of 8 col. -->
  </div>
</div>

Add the header and footer classes

The header tag is used to display the root elements like the navbar, and the footer tag is used to display information about the company in a web layout.

HTML
<header class="container-fluid bg-warning">
    ...
</header>
<div class="container">
    <!-- the grid will be placed here -->
</div>
<footer class="container-fluid bg-warning">
    ...
</footer>

It is important to note that we’re using the Bootstrap 4 contextual classes here.

Adding images

We’ll be using Unsplash images here. For the carousel, we’ll use these.

Updated web layout

We design a layout using Bootstrap 4’s row and col classes that contain a header and a footer. This will be a repeating pattern, with an image covering four columns and text spanning eight columns. We'll add some images and text to make an interactive web layout.

Here is an explanation of the code:

  • Lines 6–7: We have linked Bootstrap with our web layout within the head tag.

  • Lines 9–12: We have added the header tag along with Bootstrap's contextual and container classes.

  • Lines 13–50: We add three rows to display the image and text in the layout where each row contains the following:

    • A span of 4 columns that contains an image inside it.

    • A span of 8 columns that contains the text inside it.

  • Lines 51–54: We have added the footer tag along with Bootstrap's contextual and container classes.

Grid overlay

Now, let’s look at this layout with the Bootstrap 4 grid overlay.