Bootstrap Grid System

The Bootstrap Grid System is a responsive layout system used to arrange content into rows and columns.

It makes it easier to create layouts that work on mobile phones, tablets, laptops, and desktop computers.

Bootstrap divides each row into 12 logical columns.

You can divide these 12 columns among different elements.

12 = 6 + 6

12 = 4 + 4 + 4

12 = 3 + 3 + 3 + 3

12 = 8 + 4

The Bootstrap grid is mainly built using three elements:

1. Container
2. Row
3. Column

<div class="container">

    <div class="row">

        <div class="col">
            Content
        </div>

    </div>

</div>

A container provides the outer structure for the grid. It controls the horizontal space available to the layout.

<div class="container">

    Grid Content

</div>

You can also use container-fluid when a full-width layout is required.

The .row class creates a horizontal group of columns. Columns should generally be placed inside a row when using the Bootstrap grid.

<div class="row">

    ...

</div>

The .col class creates a flexible column.

<div class="row">

    <div class="col">
        Column 1
    </div>

    <div class="col">
        Column 2
    </div>

</div>

When using equal .col classes, the available row width is distributed equally among the columns.

Two columns can each use six of the twelve grid columns.

<div class="row">

    <div class="col-6">
        Left
    </div>

    <div class="col-6">
        Right
    </div>

</div>

6 + 6 = 12.

Three equal columns can each use four of the twelve grid columns.

<div class="row">

    <div class="col-4">
        Column 1
    </div>

    <div class="col-4">
        Column 2
    </div>

    <div class="col-4">
        Column 3
    </div>

</div>

4 + 4 + 4 = 12.

Four equal columns can each use three of the twelve grid columns.

<div class="row">

    <div class="col-3">1</div>
    <div class="col-3">2</div>
    <div class="col-3">3</div>
    <div class="col-3">4</div>

</div>

3 + 3 + 3 + 3 = 12.

Bootstrap does not require all columns to have the same width.

<div class="row">

    <div class="col-8">
        Main Content
    </div>

    <div class="col-4">
        Sidebar
    </div>

</div>

8 + 4 = 12.

Bootstrap provides column classes from col-1 through col-12.

col-1
col-2
col-3
col-4
col-5
col-6
col-7
col-8
col-9
col-10
col-11
col-12

The number indicates how many of the 12 grid columns the element should occupy at that breakpoint.

col-12 uses the entire row width.

<div class="col-12">
    Full Width Content
</div>

12 out of 12 columns are used.

col-6 uses half of the available row width.

<div class="col-6">
    Half Width
</div>

6 out of 12 columns are used.

col-4 uses one-third of the available row width.

<div class="col-4">
    One Third
</div>

4 out of 12 columns are used.

col-3 uses one-fourth of the available row width.

<div class="col-3">
    One Quarter
</div>

3 out of 12 columns are used.

Bootstrap allows you to specify different column sizes at different breakpoints.

<div class="col-12 col-md-6">
    Responsive Column
</div>

This column is full width by default and becomes half width from the medium breakpoint and above.

A common responsive pattern is one column on mobile and multiple columns on larger screens.

<div class="row">

    <div class="col-12 col-md-4">
        Box 1
    </div>

    <div class="col-12 col-md-4">
        Box 2
    </div>

    <div class="col-12 col-md-4">
        Box 3
    </div>

</div>

Each box is full width on smaller screens and one-third width from the medium breakpoint upward.

You can use several breakpoint-specific column classes on one element.

<div class="col-12 col-sm-6 col-lg-4">
    Course
</div>

• 12 columns by default
• 6 columns from sm
• 4 columns from lg

A row can be placed inside a column to create a nested grid.

<div class="row">

    <div class="col-md-8">

        <div class="row">

            <div class="col-6">
                Left
            </div>

            <div class="col-6">
                Right
            </div>

        </div>

    </div>

    <div class="col-md-4">
        Sidebar
    </div>

</div>

Gutters are the spacing between columns. Bootstrap provides gutter utilities using the g-*, gx-*, and gy-* classes.

<div class="row g-4">

    <div class="col-md-6">
        Box 1
    </div>

    <div class="col-md-6">
        Box 2
    </div>

</div>

The gx-* classes control horizontal gutter spacing.

<div class="row gx-5">

    <div class="col-6">
        Left
    </div>

    <div class="col-6">
        Right
    </div>

</div>

The gy-* classes control vertical gutter spacing between rows.

<div class="row gy-4">

    <div class="col-6">
        Box 1
    </div>

    <div class="col-6">
        Box 2
    </div>

</div>

The Bootstrap grid is frequently used to create card layouts.

<div class="row g-4">

    <div class="col-md-4">

        <div class="card">

            <div class="card-body">
                HTML Course
            </div>

        </div>

    </div>

    <div class="col-md-4">

        <div class="card">

            <div class="card-body">
                CSS Course
            </div>

        </div>

    </div>

    <div class="col-md-4">

        <div class="card">

            <div class="card-body">
                Bootstrap Course
            </div>

        </div>

    </div>

</div>

The grid can also be used to create responsive image galleries.

<div class="row g-3">

    <div class="col-6 col-md-4">
        <img src="image1.jpg"
        class="img-fluid"
        alt="Image 1">
    </div>

    <div class="col-6 col-md-4">
        <img src="image2.jpg"
        class="img-fluid"
        alt="Image 2">
    </div>

    <div class="col-6 col-md-4">
        <img src="image3.jpg"
        class="img-fluid"
        alt="Image 3">
    </div>

</div>

The grid system can be used to organize form fields into responsive columns.

<div class="row">

    <div class="col-md-6">

        <label class="form-label">
            First Name
        </label>

        <input
        type="text"
        class="form-control">

    </div>

    <div class="col-md-6">

        <label class="form-label">
            Last Name
        </label>

        <input
        type="text"
        class="form-control">

    </div>

</div>

A common website layout uses a large main content area and a smaller sidebar.

<div class="row">

    <main class="col-lg-8">
        Main Content
    </main>

    <aside class="col-lg-4">
        Sidebar
    </aside>

</div>

8 + 4 = 12.

Bootstrap grid rows can be combined with Flexbox alignment utilities.

<div class="row
align-items-center">

    <div class="col-md-6">
        Content
    </div>

    <div class="col-md-6">
        Content
    </div>

</div>

The align-items-center utility vertically aligns the row's items when there is available cross-axis space.

• Forgetting to place columns inside a row.
• Using column totals greater than 12 unintentionally.
• Forgetting responsive classes when a layout needs to change.
• Using unnecessary nested rows.
• Ignoring gutter spacing.
• Not testing the layout at different viewport widths.

• Use a container as the main grid wrapper.
• Place columns inside rows.
• Remember that each row is based on 12 columns.
• Use responsive breakpoint classes when necessary.
• Use gutters to create suitable spacing.
• Keep grid structures simple and readable.
• Test the design on different screen sizes.

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
    name="viewport"
    content="width=device-width,
    initial-scale=1.0">

    <title>
        Bootstrap Grid
    </title>

    <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    rel="stylesheet">

</head>

<body>

<div class="container py-5">

    <h1 class="text-center mb-4">
        Our Courses
    </h1>

    <div class="row g-4">

        <div class="col-12 col-md-6 col-lg-4">

            <div class="card h-100">

                <div class="card-body">

                    <h5>
                        HTML
                    </h5>

                    <p>
                        Learn HTML fundamentals.
                    </p>

                    <button
                    class="btn btn-primary">
                        Learn More
                    </button>

                </div>

            </div>

        </div>

        <div class="col-12 col-md-6 col-lg-4">

            <div class="card h-100">

                <div class="card-body">

                    <h5>
                        CSS
                    </h5>

                    <p>
                        Learn CSS styling.
                    </p>

                    <button
                    class="btn btn-success">
                        Learn More
                    </button>

                </div>

            </div>

        </div>

        <div class="col-12 col-md-6 col-lg-4">

            <div class="card h-100">

                <div class="card-body">

                    <h5>
                        Bootstrap
                    </h5>

                    <p>
                        Learn responsive web design.
                    </p>

                    <button
                    class="btn btn-danger">
                        Learn More
                    </button>

                </div>

            </div>

        </div>

    </div>

</div>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>

</body>

</html>

This example uses the Bootstrap container, row, responsive columns, gutters, cards, buttons, and responsive breakpoints.