Lesson 10 of 60 – Rows and Columns

17%

Bootstrap Rows and Columns

Rows and columns are the basic building blocks of the Bootstrap Grid System. A row is used to organize columns horizontally, while columns are used to place and size content inside the row.

Bootstrap uses a 12-column grid. By combining rows, columns, and responsive breakpoint classes, you can create flexible and responsive website layouts.

Note: A typical Bootstrap grid structure is Container → Row → Column.

1. What is a Row?

A Bootstrap row is created using the .row class. It acts as a horizontal container for columns.

<div class="row">

    Content

</div>

Columns are normally placed directly inside a row.

2. What is a Column?

A Bootstrap column is created using classes such as .col, .col-6, .col-md-4, etc.

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

Columns determine how much space an element occupies inside a row.

3. Basic Row and Column Structure

The simplest Bootstrap grid contains a container, row, and column.

<div class="container">

    <div class="row">

        <div class="col">
            Hello Bootstrap
        </div>

    </div>

</div>

4. One Column

A single .col takes the available width of the row.

<div class="row">

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

</div>

This is useful when you want one flexible column.

5. Two Equal Columns

Two .col elements automatically share the available width equally.

<div class="row">

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

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

</div>

Each column receives an equal share of the available row width.

6. Three Equal Columns

Three .col elements automatically create three equal-width columns.

<div class="row">

    <div class="col">One</div>
    <div class="col">Two</div>
    <div class="col">Three</div>

</div>

7. Using col-6

The col-6 class uses 6 out of the 12 available grid columns.

<div class="row">

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

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

</div>

6 + 6 = 12, so two equal columns fit in one row.

8. Using col-4

The col-4 class uses 4 out of 12 grid columns.

<div class="row">

    <div class="col-4">One</div>
    <div class="col-4">Two</div>
    <div class="col-4">Three</div>

</div>

4 + 4 + 4 = 12.

9. Using col-3

The col-3 class uses 3 out of 12 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.

10. Unequal Columns

Columns do not have to be equal in width.

<div class="row">

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

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

</div>

8 + 4 = 12.

11. col-7 and col-5

You can create other combinations as long as the columns fit within the 12-column grid.

<div class="row">

    <div class="col-7">
        Main Area
    </div>

    <div class="col-5">
        Side Area
    </div>

</div>

7 + 5 = 12.

12. col-9 and col-3

A common layout is a large content area with a smaller sidebar.

<div class="row">

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

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

</div>

9 + 3 = 12.

13. Columns with Different Content

Columns can contain text, images, buttons, cards, forms, or other HTML elements.

<div class="row">

    <div class="col-6">

        <h3>About Us</h3>

        <p>
            We provide web development courses.
        </p>

    </div>

    <div class="col-6">

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

    </div>

</div>

14. Responsive Columns

Responsive column classes allow the layout to change according to viewport width.

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

The column takes the full width by default and half width from the medium breakpoint and above.

15. Mobile First Columns

Bootstrap follows a mobile-first approach.

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

Here, col-12 is the base layout. The col-md-6 rule applies from the medium breakpoint upward.

16. Three Responsive Columns

You can create three responsive columns using col-md-4.

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

On smaller screens each box is full width. From the medium breakpoint upward, each box uses four columns.

17. Four Responsive Columns

You can create four columns on larger screens 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>

18. Multiple Breakpoint Classes

You can define different widths for different screen sizes.

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

col-12 → full width by default
col-sm-6 → half width from small breakpoint
col-lg-4 → one-third width from large breakpoint

19. Rows with Gutters

Bootstrap provides gutter utilities for spacing between columns.

<div class="row g-4">

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

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

</div>

The g-4 class adds gutter spacing in both directions.

20. Horizontal Gutters

Use gx-* classes to control horizontal gutter spacing.

<div class="row gx-5">

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

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

</div>

21. Vertical Gutters

Use gy-* classes to control vertical gutter spacing.

<div class="row gy-4">

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

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

</div>

22. Row with Cards

Rows and columns are commonly used to create responsive 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>

23. Row with Form Fields

Rows and columns are useful for arranging form controls.

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

24. Row with Main Content and Sidebar

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

<div class="row">

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

        <h2>Main Content</h2>

        <p>
            Website content goes here.
        </p>

    </div>

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

        <h3>Sidebar</h3>

        <p>
            Sidebar content goes here.
        </p>

    </div>

</div>

25. Wrapping Columns

If columns in a row require more than 12 grid columns, the extra columns can move to a new line.

<div class="row">

    <div class="col-8">
        8 Columns
    </div>

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

</div>

8 + 6 = 14, so the second column cannot fit in the remaining space and wraps to another line.

26. Nested Rows and Columns

You can create another row inside a column to build more complex layouts.

<div class="row">

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

        Main Content

        <div class="row">

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

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

        </div>

    </div>

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

</div>

27. Column Alignment

Bootstrap rows use Flexbox, so Flexbox utilities can be used to align columns.

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

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

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

</div>

The align-items-center class vertically aligns the row's items.

28. Common Row and Column Mistakes

Forgetting to place columns inside a row.
Using unnecessary rows.
Using column totals greater than 12 unintentionally.
Forgetting responsive breakpoint classes.
Ignoring gutter spacing.
Creating overly complicated nested grids.
Not testing the layout on smaller screens.

29. Best Practices for Rows and Columns

Use a container as the outer layout wrapper.
Use rows to group columns.
Use columns to control content width.
Remember the 12-column system.
Use responsive classes for different screen sizes.
Use gutter utilities for suitable spacing.
Keep nested grid structures simple.
Test the layout at multiple viewport widths.

30. Complete Rows and Columns Example

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

<head>

    <meta charset="UTF-8">

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

    <title>
        Bootstrap Rows and Columns
    </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 demonstrates a container, row, responsive columns, gutters, cards, buttons, and Bootstrap breakpoints working together.

📌 Key Points

.row creates a horizontal group for columns.
Columns are placed inside rows.
Bootstrap uses a 12-column grid.
.col creates flexible equal-width columns.
.col-6 uses 6 of the 12 columns.
.col-4 uses 4 of the 12 columns.
.col-3 uses 3 of the 12 columns.
Columns can have unequal widths such as 8 + 4 or 9 + 3.
Responsive classes can change column widths at different breakpoints.
g-*, gx-*, and gy-* control grid gutters.
Rows and columns can be used for cards, forms, sidebars, images, and complete website layouts.

🧠 Quick Quiz

Question: Which Bootstrap class is used to create a row?

.col
.row
.container
.grid

← Previous Next →

Bootstrap Tutorial