Next ❯

Bootstrap Grid System

  • Learn Bootstrap grid system to build fully responsive layouts.

  • Introduction to the Bootstrap Grid System

    The Grid System is the core layout mechanism of Bootstrap.

    Almost every Bootstrap layout - websites, dashboards, admin panels, landing pages - is built using the grid system.

    The grid system allows developers to:

    • Create responsive layouts

    • Align content properly

    • Control spacing and structure

    • Adapt layouts to different screen sizes

    Without understanding the grid system, Bootstrap usage remains incomplete.

    How the Bootstrap Grid System Works 

    Bootstrap’s grid system is based on three main building blocks:

    1. Containers → provide layout boundaries

    2. Rows → create horizontal groups

    3. Columns → hold actual content

    Hierarchy rule (very important):

    Container

     └── Row

          └── Column

               └── Content

    This structure must always be followed.

  • What Is a Container ?

    A container is the outermost wrapper of the grid system.

    • Holds all rows and columns

    • Controls page width

    • Adds horizontal padding

    • Centers content on the page

    Think of a container as the frame of a building.

    Types of Containers in Bootstrap

    Bootstrap provides three types of containers.

     .container (Fixed-Width Container)

    • Width changes at breakpoints

    • Content is centered

    • Most commonly used container

Fixed-Width Container

.container creates a centered fixed-width layout that changes size at different screen breakpoints. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Container Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <h2>Fixed Container</h2>
    <p>This container has fixed widths.</p>
  </div>

</body>
</html>

  • Used when:

    • You want readable, centered content

    • You want margins on large screens

    .container-fluid (Full-Width Container)

    • Always takes 100% width

    • Spans entire viewport

    • No horizontal limits

Full-Width Container

.container-fluid always takes 100% width of the viewport and stretches across the entire screen without horizontal limits. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Fluid Container</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container-fluid mt-4">
    <h2>Fluid Container</h2>
    <p>This container spans full width.</p>
  </div>

</body>
</html>

  • Used when:

    • Creating full-width layouts

    • Dashboards

    • Hero sections

    Responsive Containers

    Bootstrap also provides breakpoint-based containers:

    • .container-sm

    • .container-md

    • .container-lg

    • .container-xl

    • .container-xxl

    These containers are:

    • Fluid below a certain screen size

    • Fixed above that screen size

Responsive Containers

.container-md behaves like a full-width container on small screens and becomes fixed-width starting from medium screens and above. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Container Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container-md mt-5">
    <p>Fluid on small screens, fixed on medium and above.</p>
  </div>

</body>
</html>

  • Rows (Horizontal Layout Units)

    What is a Row ?

    A row is used to:

    • Group columns horizontally

    • Remove extra horizontal padding

    • Align columns properly

    Rows work only inside containers.

    Why Rows Are Necessary

    Rows:

    • Use negative margins

    • Ensure columns align correctly

    • Prevent layout breaking

    You should never place columns directly inside a container without a row.

Why .row Is Necessary in Bootstrap (Single & Multiple Rows)

.row wraps columns properly, ensures correct alignment using negative margins, and prevents layout issues. Multiple rows help structure content vertically inside a container. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Rows Example</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <!-- Single Row Example -->
  <div class="container mt-4">
    <div class="row">
      <div class="col bg-light p-3 text-center">
        Column inside a row
      </div>
    </div>
  </div>

  <!-- Multiple Rows Example -->
  <div class="container mt-4">
    <div class="row">
      <div class="col bg-primary text-white p-3 text-center">
        Row 1 - Column
      </div>
    </div>

    <div class="row mt-3">
      <div class="col bg-success text-white p-3 text-center">
        Row 2 - Column
      </div>
    </div>
  </div>

</body>
</html>

  • Each row creates a new horizontal section.

    Columns (Main Content Holders)

     What Are Columns ?

    Columns:

    • Hold actual content

    • Sit inside rows

    • Are based on a 12-column system

    Bootstrap divides each row into 12 equal units.

    The 12-Column Concept

    You can divide the row in many ways, as long as the total is 12.

    Examples:

    • 12 = 12

    • 6 + 6 = 12

    • 4 + 4 + 4 = 12

    • 3 + 3 + 3 + 3 = 12

12-Column Grid System (Equal Width Columns)

Bootstrap divides each row into 12 columns. Using .col automatically creates equal-width columns that share the available space equally. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>12 Column Concept</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <div class="row text-center">
      <div class="col bg-primary text-white p-3">
        Column 1
      </div>
      <div class="col bg-success text-white p-3">
        Column 2
      </div>
      <div class="col bg-danger text-white p-3">
        Column 3
      </div>
    </div>
  </div>

</body>
</html>

  • Here:

    • All columns get equal width

    • Bootstrap handles the math

Fixed-Width Columns

Defines fixed column widths using .col-4 and .col-8, which together make up the 12-column Bootstrap grid system. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Width Columns</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <div class="row text-center">
      <div class="col-4 bg-primary text-white p-3">
        4 Columns
      </div>
      <div class="col-8 bg-success text-white p-3">
        8 Columns
      </div>
    </div>
  </div>

</body>
</html>

  • This layout:

    • Uses full row width

    • Has predictable proportions

Multiple Column Layout (3 + 6 + 3 Grid)

Creates a 3-6-3 column layout using Bootstrap’s 12-column grid system, commonly used for sidebar–content–sidebar designs. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multiple Column Layout</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <div class="row text-center">
      <div class="col-3 bg-secondary text-white p-3">
        Sidebar
      </div>
      <div class="col-6 bg-primary text-white p-3">
        Main Content
      </div>
      <div class="col-3 bg-secondary text-white p-3">
        Sidebar
      </div>
    </div>
  </div>

</body>
</html>

  • This is a classic website layout.

    Responsive Columns (Concept Introduction)

    Bootstrap columns can change size based on screen width.

    Concept:

    • Stacked layout on mobile

    • Side-by-side layout on larger screens

Responsive Columns

Columns stack vertically on small screens and become side-by-side (50% width each) on medium screens and larger using col-md-6. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Columns</title>

  <!-- Bootstrap CSS CDN -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet">
</head>
<body>

  <div class="container mt-5">
    <div class="row text-center">
      <div class="col-md-6 bg-primary text-white p-3">
        Left
      </div>
      <div class="col-md-6 bg-success text-white p-3">
        Right
      </div>
    </div>
  </div>

</body>
</html>

  • Behavior:

    • Mobile: stacked

    • Medium screens and above: two columns

    Common Grid Rules

    1. Containers must wrap rows

    2. Rows must wrap columns

    3. Columns must be inside rows

    4. Total columns per row should not exceed 12

    5. Never skip container or row

    Breaking these rules causes layout issues.

    Common Mistakes

    1. Using columns without rows

    2. Placing rows outside containers

    3. Exceeding 12 columns in a row

    4. Nesting rows incorrectly

    5. Expecting grid to work without Bootstrap CSS

    Understanding structure prevents these errors.

Next ❯