Search⌘ K
AI Features

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.

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 ...