Grid System Basics

1. What is the Bootstrap Grid System?

The grid system is the foundation of Bootstrap's layout structure. It divides the page into a flexible, responsive grid of rows and columns, making it easy to create layouts that adapt to different screen sizes.

2. Core Concepts of the Grid System

• Container: Defines the boundaries of your layout.
• Rows: Horizontal groups of columns.
• Columns: Divide the row into segments.
• Breakpoints: Determine responsive behaviors.

3. Containers

Containers are used to center and pad your content. There are three types:

• .container: Fixed-width container with responsive breakpoints.
• .container-fluid: Full-width container spanning the entire viewport.
• .container-{breakpoint}: Containers for specific breakpoints.

<div class="container">Content here</div>
                

4. Rows

Rows group columns and must be placed inside a container. Use the .row class:

<div class="container">
    <div class="row">Content here</div>
</div>
                

5. Columns

Columns create the grid structure. Define their width with classes like .col-*:

<div class="container">
    <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>
</div>
                

6. Breakpoints

Bootstrap supports five breakpoints:

• xs: Extra small (<576px)
• sm: Small (≥576px)
• md: Medium (≥768px)
• lg: Large (≥992px)
• xl: Extra large (≥1200px)

7. Responsive Columns

Use breakpoints to create responsive layouts:

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

8. Nesting Columns

Columns can be nested within other columns:

<div class="row">
    <div class="col-6">
        <div class="row">
            <div class="col-6">Nested 1</div>
            <div class="col-6">Nested 2</div>
        </div>
    </div>
</div>
                

9. Offsetting Columns

Offsets create space between columns:

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

10. Alignment Options

Align columns with utility classes:

• .align-items-start
• .align-items-center
• .align-items-end

11. Vertical Alignment

Align content vertically within a column:

<div class="d-flex align-items-center">Content here</div>
                

12. Equal-Width Columns

Create equal-width columns automatically:

<div class="col">Col 1</div>
<div class="col">Col 2</div>
                

13. Auto Layout Columns

Let columns adjust automatically to content:

<div class="col-auto">Auto Width</div>
                

14. Reordering Columns

Reorder columns with classes:

<div class="col order-2">Second</div>
<div class="col order-1">First</div>