Bootstrap - Grid Extra Small

The Bootstrap 5 Grid System is a powerful mobile-first flexbox-based layout system that allows developers to design responsive and consistent web layouts. In Bootstrap 5, grids are designed with breakpoints for different screen sizes, and Extra Small (XS) targets very small screens (less than 576px wide).

Key Features of Extra Small Grids

Default for Small Screens: Grids without specified breakpoints apply to the smallest screens.

12-Column Layout: Like other grid sizes, Extra Small grids divide the layout into 12 columns.

Responsive: Adjusts layouts dynamically for devices smaller than 576px.

No Breakpoint Prefix Required: If no breakpoint is specified, it automatically applies to Extra Small.

Column Classes for Extra Small

Default Columns: Use .col for equal-width columns across all screen sizes.

Auto Sizing Columns: Use .col-auto for columns that size themselves based on their content.

Custom Sizing: Specify the number of columns with .col-[number] (e.g., .col-6 for 6 out of 12 columns).

Breakpoints Recap for Context

Breakpoint Abbreviation Screen Width (px)

Extra Small None <576px

Small sm ≥576px

Medium md ≥768px

Large lg ≥992px

Extra Large xl ≥1200px

XXL xxl ≥1400px

Example 1: Default Extra Small Columns

When no breakpoint is defined, the grid applies to Extra Small devices by default.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Bootstrap Grid Extra Small</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <div class="container">

        <div class="row">

            <div class="col bg-primary text-white">Column 1</div>

            <div class="col bg-secondary text-white">Column 2</div>

            <div class="col bg-success text-white">Column 3</div>

        </div>

    </div>

</body>

</html>

Output:

On all devices, columns divide the width equally.

Example 2: Custom Sizing for Extra Small

Specify the number of columns for each div.

<div class="container">

    <div class="row">

        <div class="col-6 bg-warning text-dark">Column 1 (6 columns)</div>

        <div class="col-6 bg-info text-white">Column 2 (6 columns)</div>

    </div>

</div>

Output:

On devices smaller than 576px, two columns of equal width (6/12) are displayed.

Example 3: Auto Sizing Columns

Use .col-auto for columns that resize based on their content.

<div class="container">

    <div class="row">

        <div class="col-auto bg-danger text-white">Auto Column 1</div>

        <div class="col-auto bg-dark text-white">Auto Column 2</div>

        <div class="col bg-light text-dark">Remaining Space</div>

    </div>

</div>

Output:

The first two columns take only the necessary space for their content, and the last column fills the remaining space.

Example 4: Nesting Extra Small Grids

You can nest grids within a column.

<div class="container">

    <div class="row">

        <div class="col-8 bg-light text-dark">

            <div class="row">

                <div class="col bg-primary text-white">Nested Column 1</div>

                <div class="col bg-secondary text-white">Nested Column 2</div>

            </div>

        </div>

        <div class="col-4 bg-success text-white">Outer Column</div>

    </div>

</div>

Output:

The first column is split into two nested columns.

Example 5: Responsive Behavior Across Sizes

By combining other breakpoints, you can create grids that adapt to different screen sizes.

<div class="container">

    <div class="row">

        <div class="col-12 col-sm-6 col-md-4 bg-info text-white">Responsive Column 1</div>

        <div class="col-12 col-sm-6 col-md-4 bg-warning text-dark">Responsive Column 2</div>

        <div class="col-12 col-sm-12 col-md-4 bg-danger text-white">Responsive Column 3</div>

    </div>

</div>

Output:

Extra Small: Columns stack vertically.

Small: Two columns in a row.

Medium and above: Three columns in a row.