Bootstrap Tutorial: Learn the Grid System

In this Bootstrap tutorial, you’ll learn how to use the Bootstrap Grid System to create responsive layouts. The grid system uses rows and columns to organize content, making it easy to build webpages that adapt to any screen size.

---

What You’ll Learn

• How the Bootstrap grid works
• Creating rows and columns
• Using different column sizes
• Building a simple responsive layout

---

Prerequisites

• Basic knowledge of HTML
• A text editor (e.g., VS Code, Notepad)
• A web browser (e.g., Chrome, Firefox)

---

Step 1: Understand the Grid System

Bootstrap’s grid divides the page into 12 columns. You place content in these columns using div elements with classes like col, row, and container. The grid adjusts automatically for different screen sizes (mobile, tablet, desktop).

Assume Bootstrap CSS is included in your project (we’ll skip the <link> tag as requested).

---

Step 2: Create a Basic Grid

Start with a simple layout: one row with two equal columns. Use this code:

<div class="container">
    <div class="row">
        <div class="col">
            <h3>Column 1</h3>
            <p>This is the first column.</p>
        </div>
        <div class="col">
            <h3>Column 2</h3>
            <p>This is the second column.</p>
        </div>
    </div>
</div>

Explanation:

• container: Centers and constrains the content.
• row: Creates a horizontal row for columns.
• col: Splits the row into equal columns (each takes 6 of the 12 grid units here).

This creates two side-by-side columns. On smaller screens, they stack vertically.

---

Step 3: Use Specific Column Sizes

You can control column width using classes like col-6 (6 units wide). Try this three-column layout:

<div class="container">
    <div class="row">
        <div class="col-4">
            <h3>Left</h3>
            <p>Takes 4 columns.</p>
        </div>
        <div class="col-4">
            <h3>Center</h3>
            <p>Also 4 columns.</p>
        </div>
        <div class="col-4">
            <h3>Right</h3>
            <p>Another 4 columns.</p>
        </div>
    </div>
</div>

Explanation:

• col-4: Each column uses 4 of the 12 grid units, creating three equal columns.
• Total width is 12 units (4 + 4 + 4).

The columns sit side by side on large screens and stack on mobile.

---

Step 4: Mix Column Sizes

You can mix sizes for uneven layouts. Here’s a layout with a wide and a narrow column:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Main Content</h3>
            <p>This column is wider, taking 8 of 12 units.</p>
        </div>
        <div class="col-4">
            <h3>Sidebar</h3>
            <p>This is narrower, taking 4 units.</p>
        </div>
    </div>
</div>

Explanation:

• col-8: Takes 8 units (two-thirds of the width).
• col-4: Takes 4 units (one-third of the width).

This creates a main content area and a sidebar that stack on smaller screens.

---

Step 5: Add Responsive Classes

Bootstrap’s grid can adapt to screen sizes using classes like col-sm-, col-md-, etc. Try this responsive layout:

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <h3>Box 1</h3>
            <p>Adjusts based on screen size.</p>
        </div>
        <div class="col-sm-6 col-md-3">
            <h3>Box 2</h3>
            <p>Changes width automatically.</p>
        </div>
        <div class="col-sm-6 col-md-3">
            <h3>Box 3</h3>
            <p>Responsive column.</p>
        </div>
        <div class="col-sm-6 col-md-3">
            <h3>Box 4</h3>
            <p>Last box in the row.</p>
        </div>
    </div>
</div>

Explanation:

• col-sm-6: On small screens (≥576px), each column takes half the width.
• col-md-3: On medium screens (≥768px), each takes a quarter (3 units).
• On tiny screens (<576px), columns stack fully.

Resize your browser to see the layout shift.

---

Final Code

Here’s a sample layout combining different column sizes:

<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <h3>Main Section</h3>
            <p>This is the primary content area.</p>
            <button class="btn btn-primary">Read More</button>
        </div>
        <div class="col-sm-4">
            <h3>Sidebar</h3>
            <p>Extra info goes here.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <h3>Feature 1</h3>
            <p>Small feature box.</p>
        </div>
        <div class="col-sm-4">
            <h3>Feature 2</h3>
            <p>Another feature.</p>
        </div>
        <div class="col-sm-4">
            <h3>Feature 3</h3>
            <p>Final feature.</p>
        </div>
    </div>
</div>

---

Output

Your webpage should show:

• A wide main section (with a button) and a sidebar in the first row.
• Three equal feature boxes in the second row.
• On mobile, all columns stack vertically for easy reading.

---

Next Steps

• Check the Bootstrap Grid Docs for advanced layouts.
• Try nesting rows inside columns for complex designs.
• Add styles like bg-light or border to columns for visual flair.

---

Conclusion

You’ve learned the Bootstrap Grid System! With rows and columns, you can create flexible, responsive layouts effortlessly. Experiment with different column sizes to build your own designs.

---