Bootstrap Understanding The Grid System Complete Guide

 Last Update:2025-06-23T00:00:00     .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION.    8 mins read      Difficulty-Level: beginner

Understanding the Core Concepts of Bootstrap Understanding the Grid System

Understanding the Bootstrap Grid System

1. Grid Basics

At its core, Bootstrap's grid system is based on a 12-column layout. This means that any given row is divided into 12 equal parts. Elements within these rows, known as columns, are arranged to fit within these 12 parts. For example, if you define a column to span 6 parts, it will take up half of the width of the row.

2. Components of the Grid System

The Bootstrap grid is made up of three primary components:

  • Containers: The outermost wrapper that holds rows. Containers ensure that your grid system is responsive and adapts to different screen sizes.

    • .container: A fixed-width container centered on the page.
    • .container-fluid: A full-width container that spans the entire width of the viewport.

  • Rows: These are horizontal groups of columns. Rows act as a wrapper to your columns, ensuring that they align properly and maintain their structure.

    • .row: The class used to define a row.

  • Columns: These span the width of a row and are the foundation of the grid system's responsiveness.

    • .col-: Indicates that the column should be used at all breakpoints.
    • .col-sm-: Indicates that the column should be used on small devices and above.
    • .col-md-: Indicates that the column should be used on medium devices and above.
    • .col-lg-: Indicates that the column should be used on large devices and above.
    • .col-xl-: Indicates that the column should be used on extra-large devices and above.
    • .col-xxl-: Indicates that the column should be used on extra-extra-large devices and above.

3. Grid Usage

Here’s how you can use these components to create your grid layout:

  • Single Column Example:

    <div class="container">
  <div class="row">
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

  • Multiple Column Example:

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

  • Responsive Grid Example:

    <div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-8">
      Main Content
    </div>
    <div class="col-sm-12 col-md-4">
      Sidebar
    </div>
  </div>
</div>

In the above example, the main content occupies 8 columns and the sidebar occupies 4 columns on medium devices and above. On smaller screens (less than medium), both the main content and the sidebar each occupy the full width (12 columns).

4. Gutter Width

Bootstrap 5 introduced the concept of gutter width, making it easier to control the space between columns. You can customize the gutter width using utility classes like .g-0, .g-1, .g-2, .g-3, .g-4, .g-5, and .g-auto.

Example:

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

In this snippet, the gutter width between columns is set to .5rem (g-3).

5. Offset Columns

Offsetting columns can be useful when you want to create empty space in a row. You can use offset classes like .offset-sm-1, .offset-md-2, etc., to push columns to the right.

Example:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      First column
    </div>
    <div class="col-md-4 offset-md-4">
      Third column
    </div>
  </div>
</div>

Here, "Third column" is pushed to the right by 4 columns on medium devices and above.

6. Nesting Columns

Bootstrap's grid system allows you to nest columns within other columns. This is useful for creating complex layouts.

Example:

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      Level 1: .col-sm-8
      <div class="row">
        <div class="col-sm-6">
          Level 2: .col-sm-6
        </div>
        <div class="col-sm-6">
          Level 2: .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

In this example, "Level 1" is a column that spans 8 parts of a row, and within it, two nested columns each span 6 parts of their containing row.

7. Auto-layout Columns

When you do not specify a number of columns, Bootstrap uses automatic column resizing. Columns automatically resize and become equal-width when there is no free space left.

Example:

<div class="container">
  <div class="row">
    <div class="col">
      Auto-resized column
    </div>
    <div class="col">
      Auto-resized column
    </div>
    <div class="w-100"></div> <!-- Force next columns to break to a new line -->
    <div class="col">
      Auto-resized column
    </div>
    <div class="col">
      Auto-resized column
    </div>
  </div>
</div>

In this example, the first two and last two columns will each take up half of the row’s width.

8. Ordering Columns

Sometimes, rearranging the columns for certain screen sizes is necessary to improve the user experience. You can use order utility classes like .order-0, .order-1, .order-2, etc., to control the order of columns.

Example:

<div class="container">
  <div class="row">
    <div class="col order-2">
      Third, but first
    </div>
    <div class="col order-3">
      Second, but third
    </div>
    <div class="col order-1">
      First, but second
    </div>
  </div>
</div>

In this example, the columns are ordered as: "First, but second", "Third, but first", and "Second, but third".

Conclusion

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement Bootstrap Understanding the Grid System

Example 1: Basic Grid Structure

Step 1: Import Bootstrap

First, include the necessary Bootstrap CSS in your HTML file. You can use a CDN for this purpose.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Grid System</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Your content will go here -->
</body>
</html>

Step 2: Create a Basic Grid

Bootstrap's grid system is based on rows (.row) and columns (.col). Here's a simple example with three equal-width columns.

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

Full HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Grid System</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col bg-primary text-white">
                Column 1
            </div>
            <div class="col bg-secondary text-white">
                Column 2
            </div>
            <div class="col bg-success text-white">
                Column 3
            </div>
        </div>
    </div>
    <!-- Bootstrap JS and dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation

  • Container: The .container class creates a responsive fixed-width container.
  • Row: The .row class is used to create a horizontal group of columns within the container.
  • Column: The .col class specifies a column within the grid. By default, if the number of columns in a row are 12 or less, they are evenly spaced.

Example 2: Specifying Column Widths

Bootstrap allows you to specify the number of columns a particular column should span using classes like .col-# where # is the number of grid spaces (out of 12).

Step 1: Import Bootstrap

Use the same import as in Example 1.

Step 2: Specify Column Widths

Let’s create a layout where the first column takes up 2 columns (1/6th of the width), and the second column takes up 10 columns (5/6th of the width).

<div class="container">
    <div class="row">
        <div class="col-2 bg-primary text-white">
            Column 1 (2 of 12)
        </div>
        <div class="col-10 bg-secondary text-white">
            Column 2 (10 of 12)
        </div>
    </div>
</div>

Full HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Grid System</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-2 bg-primary text-white">
                Column 1 (2 of 12)
            </div>
            <div class="col-10 bg-secondary text-white">
                Column 2 (10 of 12)
            </div>
        </div>
    </div>
    <!-- Bootstrap JS and dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Example 3: Responsive Grid System

Bootstrap’s grid system is responsive, meaning you can specify different column widths for different screen sizes.

Step 1: Import Bootstrap

Use the same import as in Example 1.

Step 2: Add Responsive Classes

Let’s create a layout where:

  • On small devices (phones), all columns stack in a single row.
  • On medium devices (tablets) and larger, two columns are displayed side by side.
<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 bg-primary text-white">
            Column 1 (Full width on small, Half on medium)
        </div>
        <div class="col-12 col-md-6 bg-secondary text-white">
            Column 2 (Full width on small, Half on medium)
        </div>
    </div>
</div>

Full HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Grid System</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6 bg-primary text-white">
                Column 1 (Full width on small, Half on medium)
            </div>
            <div class="col-12 col-md-6 bg-secondary text-white">
                Column 2 (Full width on small, Half on medium)
            </div>
        </div>
    </div>
    <!-- Bootstrap JS and dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation

  • Responsive Classes: .col-12 makes the column span the full width on small devices, while .col-md-6 makes the column take up half the width (6 out of 12 columns) on medium and larger devices.
  • The .row class automatically wraps the columns into new lines if there is not enough space for them to fit side by side.

Example 4: Nested Grids

You can also nest rows within columns for more complex layouts.

Step 1: Import Bootstrap

Use the same import as in Example 1.

Step 2: Create Nested Columns

Let’s create a layout where one column contains another row with two equal columns.

Top 10 Interview Questions & Answers on Bootstrap Understanding the Grid System

Top 10 Questions and Answers: Understanding the Bootstrap Grid System

The Bootstrap Grid System is a powerful layout tool that helps developers create responsive websites by dividing the webpage into rows and columns. It uses a series of container (container for fixed width or container-fluid for full-width), rows (row), and columns (col-) to structure content seamlessly across devices.

2. What are the key components of the Bootstrap Grid System?

The primary components of the Bootstrap Grid System include containers, rows, and columns.

  • Container: A wrapper that holds all the grid content. Two types are available: fixed-width (container) and full-width (container-fluid).
  • Row: Defines a horizontal group of columns within the container.
  • Columns: Individual cells that can span a certain number of grid units (ranging from 1 to 12). Columns are responsive and will adjust their width based on the device's screen size (using different breakpoints).

3. How many columns does a Bootstrap grid row have by default?

A Bootstrap grid row has 12 columns by default. Column classes are used to define the amount of horizontal space each column should occupy out of the total 12 available.

4. What are the responsive breakpoints in Bootstrap Grid System?

Bootstrap uses six media query breakpoints to handle responsive design. These breakpoints are:

  • xs (extra small) for very small devices like mobile phones (width < 576px).
  • sm (small) for small tablets (width ≥ 576px).
  • md (medium) for smaller laptops (width ≥ 768px).
  • lg (large) for laptops and desktops (width ≥ 992px).
  • xl (extra-large) for large desktops (width ≥ 1200px).
  • xxl (extra-extra-large) for extra large desktops (width ≥ 1400px).

5. How do I create a two-column layout using Bootstrap Grid System?

To create a two-column layout in Bootstrap Grid System, use a row (row) with two columns (col-). By default, both columns will take equal space. For example:

<div class="container">
  <div class="row">
    <div class="col-6">
      Column 1: 50% width
    </div>
    <div class="col-6">
      Column 2: 50% width
    </div>
  </div>
</div>

6. Can I make a three-column layout that changes the number of columns for smaller devices?

Yes, you can specify different numbers of columns for different screen sizes by adding responsive column classes. For a three-column layout that collapses into one column on extra small devices, you can do:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-4">
      Column 1: Full width on xs, 1/3 width on md+
    </div>
    <div class="col-12 col-md-4">
      Column 2: Full width on xs, 1/3 width on md+
    </div>
    <div class="col-12 col-md-4">
      Column 3: Full width on xs, 1/3 width on md+
    </div>
  </div>
</div>

7. How can I create nested columns in Bootstrap Grid System?

Nested columns allow you to create sub-columns within an existing column by adding another row inside the parent column. Ensure you use another row element inside the column to avoid grid collapse issues.

<div class="row">
  <div class="col-9">
    Level 1: .col-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
  <div class="col-3">
    Level 1: .col-3
  </div>
</div>

8. What are margin utilities and how do they help with the Bootstrap Grid System?

Margin utilities in Bootstrap Grid System provide an easy way to add or remove space between and around grid elements. They help align and space out columns without modifying the layout. Common utilities include ms-auto, mx-auto, my-1, among others.

9. How can I center content within a bootstrap grid?

To center content horizontally using Bootstrap Grid System, you can apply the justify-content-center class to the row element. For vertical centering, use align-items-center. Here's an example:

<div class="container">
  <div class="row justify-content-center align-items-center">
    <div class="col-4">
      Centered content
    </div>
  </div>
</div>

10. How to handle columns that do not fit within a single row in Bootstrap Grid System?

Bootstrap automatically wraps columns into new rows if they exceed the total of 12 grid units in a single row. If you exceed the 12-column limit within a row, the extra columns will wrap onto a new line, aligning themselves according to the rules of the grid system.

You May Like This Related .NET Topic

📥 Download Code ▶️ Watch Online 📖 Read Description

Login to post a comment.