Bootstrap Grids

Introduction

Bootstrap is one of the most popular front-end frameworks used for building responsive websites.

It simplifies web design by providing pre-designed components, including grids and typography styles. In our last blog, we covered Getting Started with Bootstrap, where we discussed the basics of setting up Bootstrap and its advantages. Now, in this blog, we will explore the Bootstrap Grid System and Typography, explaining everything in detail with easy-to-understand examples.

Bootstrap Grids

Bootstrap Grid System

The Bootstrap Grid System is the foundation for creating responsive layouts. It is based on a 12-column layout that adjusts automatically based on screen size. The grid system uses flexbox and provides a structured way to design web pages without writing complex CSS.

Grid Classes

Bootstrap offers various grid classes to define how elements should be displayed on different screen sizes:

.container – Creates a fixed-width container.
.container-fluid – Creates a full-width container.
.row – Defines a row to hold columns.
.col- – Defines column widths (e.g., .col-4, .col-6, .col-12).
.col-sm- – For small screens.
.col-md- – For medium screens.
.col-lg- – For large screens.
.col-xl- – For extra-large screens.

Basic Structure of a Bootstrap Grid

The following is a basic structure of a Bootstrap grid:

Two Equal Columns

<div class="container">
  <div class="row">
    <div class="col-md-6" style="background-color:red;">Column 1</div>
    <div class="col-md-6" style="background-color:green;">Column 2</div>
  </div>
</div>

This code creates a row with two equal columns on medium-sized screens and larger.

Output:

Some examples of basic Bootstrap grid layouts.

Three Equal Columns

The below given example demonstrates how to create three columns of identical width that scale from tablets to huge desktops. The columns will stack automatically on mobile devices or displays smaller than 768 pixels.

Example:

<div class="container">
  <div class="row">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4">Column 2</div>
    <div class="col-md-4">Column 3</div>
  </div>
</div>

This divides the row into three equal parts.

Output:

Two Unequal Columns

The below given example demonstrates how to obtain two columns of varying widths that scale to huge desktops from tablets.

Example:

<div class="row">
  <div class="col-sm-4" style="background-color:yellow;">.col-sm-4</div>
  <div class="col-sm-8" style="background-color:green;">.col-sm-8</div>
</div>
</div>

Here, the first column takes 8 out of 12 parts, and the second column takes 4 out of 12 parts.

Request more information

Bootstrap Grids