Bootstrap Responsive Grid

A responsive grid is a layout that changes its structure according to the available screen width.

For example, three columns can appear side by side on a desktop while the same columns can stack vertically on a mobile phone.

Desktop:
[ Column 1 ][ Column 2 ][ Column 3 ]

Mobile:
[ Column 1 ]
[ Column 2 ]
[ Column 3 ]

Bootstrap uses a mobile-first responsive approach. Base classes are applied first, and breakpoint classes are used to change the layout for larger screens.

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

Here, the element is full width by default and becomes half width from the medium breakpoint upward.

Bootstrap provides these standard responsive breakpoints:

• xs: below 576px — no class prefix
• sm: 576px and above
• md: 768px and above
• lg: 992px and above
• xl: 1200px and above
• xxl: 1400px and above

These breakpoint names are based on viewport width, not on particular physical devices.

A common responsive grid pattern is col-12 col-md-6.

<div class="row">

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

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

</div>

The columns are full width on smaller screens and half width from the medium breakpoint upward.

The col-sm-6 class makes the column use 6 of 12 columns from the small breakpoint upward.

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

Below the small breakpoint, the column behaves as a full-width column unless another base column class changes that behavior.

The col-md-4 class makes a column use 4 of 12 columns from the medium breakpoint upward.

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

This is commonly used for three-column layouts on larger screens.

Three columns can stack on smaller screens and appear side by side on medium and 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>

Four columns can be displayed on large screens by using col-lg-3.

<div class="row">

    <div class="col-12 col-lg-3">
        1
    </div>

    <div class="col-12 col-lg-3">
        2
    </div>

    <div class="col-12 col-lg-3">
        3
    </div>

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

</div>

You can give an element different column widths at different viewport sizes.

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

• Default → 12 columns
• Small and above → 6 columns
• Large and above → 4 columns

A very common beginner mistake is thinking that col-md-6 means half width only on medium screens.

In reality, it applies from the medium breakpoint and upward until another rule overrides it.

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

So it is half width at medium, large, extra-large, and extra-extra-large viewport widths.

Use col-12 col-md-6 when you want one column per row on smaller screens and two columns per row on larger screens.

<div class="row">

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

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

</div>

Use col-12 col-lg-4 for three columns on large screens.

<div class="row">

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

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

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

</div>

A course website can use responsive columns to display cards according to the available screen width.

<div class="row g-4">

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

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

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

</div>

This creates one column by default, two columns from medium and three columns from large.

A responsive website can use a full-width content area on smaller screens and a main-content/sidebar layout on larger screens.

<div class="row">

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

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

</div>

On smaller screens both sections take the full width. From the large breakpoint upward, the main content uses 8 columns and the sidebar uses 4.

Responsive grid classes are useful for creating forms that adapt to different screen sizes.

<div class="row">

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

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

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

    </div>

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

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

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

    </div>

</div>

The responsive grid is useful for image galleries.

<div class="row g-3">

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

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

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

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

</div>

This example creates two columns by default, three from medium, and four from large.

Responsive grid classes can also help arrange navigation-related content.

<div class="row">

    <div class="col-12 col-md-8">
        Website Logo
    </div>

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

</div>

The sections stack on smaller screens and sit beside each other from the medium breakpoint upward.

Dashboard statistics can be displayed using responsive columns.

<div class="row g-4">

    <div class="col-12 col-sm-6 col-lg-3">
        Total Students
    </div>

    <div class="col-12 col-sm-6 col-lg-3">
        Courses
    </div>

    <div class="col-12 col-sm-6 col-lg-3">
        Payments
    </div>

    <div class="col-12 col-sm-6 col-lg-3">
        Attendance
    </div>

</div>

The layout changes from one column to two and then four columns as the viewport becomes wider.

The g-4 utility can be combined with responsive columns to create consistent spacing.

<div class="row g-4">

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

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

</div>

The responsive columns control the layout, while g-4 controls the gutter spacing.

When cards in responsive columns should stretch to equal heights, you can use the h-100 utility on the cards.

<div class="row g-4">

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

        <div class="card h-100">

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

        </div>

    </div>

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

        <div class="card h-100">

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

        </div>

    </div>

</div>

You can use the xl breakpoint when a layout should change at extra-large viewport widths.

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

The element is full width by default and uses 3 of 12 columns from the extra-large breakpoint upward.

The xxl breakpoint can be used when a layout needs a different arrangement on very wide screens.

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

The col-xxl-3 rule applies from the xxl breakpoint upward.

You can combine several breakpoint rules in one class list.

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

    Product

</div>

• Default → 12 columns
• sm → 6 columns
• md → 4 columns
• lg → 3 columns

Bootstrap also provides responsive offset classes that can move a column to the right by a specified number of grid columns.

<div class="row">

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

</div>

Here, the 6-column element has a 3-column offset from the medium breakpoint upward.

Bootstrap provides responsive order utilities that can change the visual order of flex items.

<div class="row">

    <div class="col order-2 order-md-1">
        Main Content
    </div>

    <div class="col order-1 order-md-2">
        Sidebar
    </div>

</div>

The visual order can therefore be different at different breakpoints.

Responsive grid layouts can be combined with Bootstrap's alignment utilities.

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

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

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

</div>

Because Bootstrap rows use Flexbox, Flexbox utilities can be used to control alignment.

• Start with a mobile-friendly base layout.
• Add breakpoint classes only when the layout needs to change.
• Use col-12 for full-width mobile sections when needed.
• Use col-md-6 for two-column medium-and-up layouts.
• Use col-lg-4 for three-column large-and-up layouts.
• Use gutters to maintain consistent spacing.
• Test the layout at different viewport widths.

• Thinking col-md-6 applies only at the md breakpoint.
• Forgetting the mobile-first behavior.
• Using too many breakpoint classes without a clear reason.
• Ignoring content overflow inside columns.
• Forgetting to test intermediate viewport sizes.
• Using column combinations that do not produce the intended layout.
• Ignoring gutter spacing.

Before creating a responsive layout, decide how many columns should be visible at different viewport sizes.

This planning approach helps you select suitable Bootstrap column classes before writing the HTML.

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

<head>

    <meta charset="UTF-8">

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

    <title>
        Responsive 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-sm-6 col-lg-4">

            <div class="card h-100">

                <div class="card-body">

                    <h5>
                        HTML Course
                    </h5>

                    <p>
                        Learn HTML from basic to advanced concepts.
                    </p>

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

                </div>

            </div>

        </div>

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

            <div class="card h-100">

                <div class="card-body">

                    <h5>
                        CSS Course
                    </h5>

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

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

                </div>

            </div>

        </div>

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

            <div class="card h-100">

                <div class="card-body">

                    <h5>
                        Bootstrap Course
                    </h5>

                    <p>
                        Learn responsive layouts with Bootstrap.
                    </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>

In this example, each course is full width by default, uses half of the row from the small breakpoint, and uses four columns from the large breakpoint upward.