Bootstrap 5 Grid Basic

🎯 What is the Grid System?

Bootstrap's grid system uses flexbox to create responsive layouts with rows and columns. It divides the page into 12 columns, allowing you to build complex responsive designs easily with simple classes.


<!-- Basic Grid -->
<div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
</div>

Grid System Basics

📊

12 Column System

Bootstrap divides each row into 12 equal columns. You can combine these columns to create layouts of any width, from full-width sections to complex multi-column designs with precise control.

📱

Responsive

Grid columns automatically adjust based on screen size. Use breakpoint classes like col-sm, col-md, col-lg to control how columns stack and resize across different devices for optimal viewing.

🔄

Flexbox Powered

Built on CSS flexbox for modern, flexible layouts. This provides powerful alignment, ordering, and distribution options that make creating complex responsive designs simple and maintainable.

⚡

Easy to Use

Create layouts with simple, intuitive classes. No complex CSS required - just add row and column classes to your HTML elements and Bootstrap handles all the responsive behavior automatically.

🔹 Basic Grid Structure

Bootstrap's grid is a powerful, flexible, 12-column system built with Flexbox. It requires a three-tier nesting structure: a .container (or .container-fluid) as the outermost wrapper, one or more .row elements inside it to create horizontal groups, and .col elements as direct children of rows to hold your actual content. Rows use negative margins to offset the padding of containers, ensuring columns align correctly. Columns are assigned units that total 12 per row. This structured yet flexible system is the backbone of nearly every Bootstrap layout, enabling complex, responsive designs.

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

Output:

Column 1

Column 2

Column 3

🔹 Equal Width Columns

To create a simple row where all columns are automatically equal width, use the generic .col class without a breakpoint or number suffix. Bootstrap's Flexbox layout will distribute the available space evenly among all columns in that row, regardless of how many there are. This is incredibly useful for creating flexible lists, galleries, or feature sections where the number of items might change, and you want them to share space equally. It removes the need for manual width calculations and adapts seamlessly as columns wrap onto new lines on smaller screens.

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

🔹 Setting Column Width

For precise control, assign column widths using the format .col-{breakpoint?}-{number}, where the number (1-12) represents how many of the 12 available column units it should occupy. For example, .col-4 takes up 4/12 (or 33.33%) of the row's width. You can mix and match these numbered columns within a row, as long as their unit sum doesn't exceed 12 (if it does, they'll wrap). This allows you to create any layout ratio, such as a common 3-column (col-4 | col-4 | col-4) or a main/sidebar layout (col-8 | col-4), with pixel-perfect proportional control.

<div class="container">
    <div class="row">
        <div class="col-8">col-8 (66.66%)</div>
        <div class="col-4">col-4 (33.33%)</div>
    </div>
    <div class="row">
        <div class="col-6">col-6 (50%)</div>
        <div class="col-6">col-6 (50%)</div>
    </div>
    <div class="row">
        <div class="col-4">col-4</div>
        <div class="col-4">col-4</div>
        <div class="col-4">col-4</div>
    </div>
</div>

🔹 Responsive Columns

Build adaptive layouts by applying column classes with breakpoint prefixes (e.g., .col-md-6). This instructs the column to behave one way at the specified breakpoint and above, and another way (typically full-width, stacking) below it. A classic pattern is .col-12 .col-md-6 .col-lg-4, which creates a single column on phones, two columns on tablets, and three columns on desktops. This responsive approach is the core of Bootstrap's mobile-first philosophy, ensuring your content is always presented in an optimal, readable arrangement regardless of the user's device or screen size.

<div class="container">
    <div class="row">
        <!-- Stack on mobile, 2 columns on tablet and up -->
        <div class="col-12 col-md-6">Column 1</div>
        <div class="col-12 col-md-6">Column 2</div>
    </div>
    
    <div class="row">
        <!-- Stack on mobile, 3 columns on desktop -->
        <div class="col-12 col-lg-4">Column 1</div>
        <div class="col-12 col-lg-4">Column 2</div>
        <div class="col-12 col-lg-4">Column 3</div>
    </div>
</div>

🔹 Grid Breakpoints

Bootstrap's responsive grid is defined by six default breakpoints: X-Small (no prefix, <576px), Small (sm, ≥576px), Medium (md, ≥768px), Large (lg, ≥992px), Extra Large (xl, ≥1200px), and Extra Extra Large (xxl, ≥1400px). Each breakpoint corresponds to a common device screen size range. When you use a class like .col-lg-, you are defining the column's behavior from the 'large' breakpoint upward. Understanding this tiered system allows you to design intentional layout shifts, creating experiences that are not just fluid but intelligently reconfigure at key screen-width thresholds for maximum usability.

Breakpoint Classes:

col- Extra small (<576px)
col-sm- Small (≥576px)
col-md- Medium (≥768px)
col-lg- Large (≥992px)
col-xl- Extra large (≥1200px)
col-xxl- Extra extra large (≥1400px)

🔹 Column Wrapping

On extra large screens, leverage natural column wrapping to design sophisticated, magazine-style, or dashboard layouts where content flows across multiple rows. By intentionally using column unit totals that exceed 12 in a single .row, you can create dynamic grids for portfolios, card-based content, or data visualizations. This technique reduces the need for multiple, separate row containers and keeps the HTML semantic and DRY (Don’t Repeat Yourself). Clean, efficient HTML improves page load speed and crawlability for search engines. A well-executed wrapping layout that presents content in an engaging, scannable format can significantly improve user dwell time and reduce bounce rates—positive signals for SEO ranking algorithms.

<div class="container">
    <div class="row">
        <div class="col-9">col-9</div>
        <div class="col-4">col-4 (wraps to new line)</div>
        <div class="col-6">col-6</div>
    </div>
</div>

🔹 Practical Example

A typical website layout using the grid system might include: a full-width header (.container-fluid), a main content area within a fixed .container featuring a .row with a .col-lg-8 for the article and a .col-lg-4 for the sidebar, and a footer in another .container. On smaller screens, the sidebar stacks below the article (.col-12). This example demonstrates how the grid provides structure, enforces consistency, and delivers a fully responsive design. It showcases the combination of containers, rows, responsive column classes, and the 12-unit system in a real-world scenario.

<div class="container">
    <!-- Header -->
    <div class="row">
        <div class="col-12 bg-primary text-white p-3">
            <h1>My Website</h1>
        </div>
    </div>
    
    <!-- Main Content -->
    <div class="row mt-3">
        <div class="col-12 col-md-8">
            <h2>Main Content</h2>
            <p>This is the main content area.</p>
        </div>
        <div class="col-12 col-md-4">
            <h3>Sidebar</h3>
            <p>Sidebar content here.</p>
        </div>
    </div>
    
    <!-- Footer -->
    <div class="row mt-3">
        <div class="col-12 bg-dark text-white p-3">
            <p>© 2025 My Website</p>
        </div>
    </div>
</div>