Bootstrap 5 Grid Extra Small

Last Updated : 13 Feb, 2024

Bootstrap 5 is one of the famous CSS frameworks for developing responsive web pages, And this framework is a collection of Styled Components and classes by these we can able to create responsive web page layouts like column-based and grid system-based layouts and other types. We will discuss the Extra small column break point in the Bootstrap Grid System. This column breakpoint is mostly used for screen sizes less than 576 px. In Bootstrap 5 Grid System we have six different column breakpoint classes and every row has twelve columns.

These are the following approaches:

Table of Content

col-{ number } within row class approach
row-cols-auto class approach

col-{ number } within row class approach

This is one of the approaches for creating extra small columns in the Bootstrap 5 Grid System. This approach involves directly using the col class within a row container. We can specify the required column size using numerical classes like col-1, col-2, and other sizes. In this approach, we can use col-size the size is available from 1 to 12 only like col-2. Now I will provide one example for this, To understand the concept in a better way.

Syntax:

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

Example: This example shows the use of col-{size} syntax.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extra Small</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
 
<style>
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-6,
    .col-12 {
        border: 1px solid white;
    }
</style>
 
<body>
 
    <div class="container p-5 text-center text-white">
        <div class="row">
            <p class="text-success p-2">
                Extra Small With 12 columns (Size - 1) with in a Row</p>
            <div class="col-1 bg-success">
                <h1>1</h1>
            </div>
            <div class="col-1 bg-success">
                <h1>2</h1>
            </div>
            <div class="col-1 bg-success">
                <h1>3</h1>
            </div>
            <div class="col-1 bg-success">
                <h1>4</h1>
            </div>
            <div class="col-1 bg-success">
                <h1>5</h1>
            </div>
            <div class="col-1 bg-success">
                <h1>6</h1>
            </div>
            <div class="col-1 bg-success">
                <h1>7</h1>
            </div>
            <div class="col-1 bg-success">
                <h1>8</h1>
            </div>
            <div class="col-1 bg-success">
                <h1>9</h1>
            </div>
            <div class="col-1 bg-success">
                <h1>10</h1>
            </div>
            <div class="col-1 bg-success">
                <h1>11</h1>
            </div>
            <div class="col-1 bg-success">
                <h1>12</h1>
            </div>
        </div>
 
        <div class="row mt-3">
            <p class="text-success p-2">
                Extra Small With 12 columns (Size - 2) with in a Row</p>
            <div class="col-2 bg-success">
                <h1>1</h1>
            </div>
            <div class="col-2 bg-success">
                <h1>2</h1>
            </div>
            <div class="col-2 bg-success">
                <h1>3</h1>
            </div>
            <div class="col-2 bg-success">
                <h1>4</h1>
            </div>
            <div class="col-2 bg-success">
                <h1>5</h1>
            </div>
            <div class="col-2 bg-success">
                <h1>6</h1>
            </div>
        </div>
 
        <div class="row mt-3">
            <p class="text-success p-2">
                Extra Small With 12 columns (Size - 3) with in a Row</p>
            <div class="col-3 bg-success">
                <h1>1</h1>
            </div>
            <div class="col-3 bg-success">
                <h1>2</h1>
            </div>
            <div class="col-3 bg-success">
                <h1>3</h1>
            </div>
            <div class="col-3 bg-success">
                <h1>4</h1>
            </div>
        </div>
 
        <div class="row mt-3">
            <p class="text-success p-2">
                Extra Small With 12 columns (Size - 4) with in a Row</p>
            <div class="col-4 bg-success">
                <h1>1</h1>
            </div>
            <div class="col-4 bg-success">
                <h1>2</h1>
            </div>
            <div class="col-4 bg-success">
                <h1>3</h1>
            </div>
        </div>
 
        <div class="row mt-3">
            <p class="text-success p-2">
                Extra Small With 12 columns (Size - 6) with in a Row</p>
            <div class="col-6 bg-success">
                <h1>1</h1>
            </div>
            <div class="col-6 bg-success">
                <h1>2</h1>
            </div>
        </div>
 
        <div class="row mt-3">
            <p class="text-success p-2">
                Extra Small With 12 columns (Size - 12) with in a Row</p>
            <div class="col-12 bg-success">
                <h1>1</h1>
            </div>
        </div>
 
    </div>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
 
</html>

Output:

output

Explanation:

In the above HTML code first I integrate Bootstrap 5 framework by using CDN links in header section.
After that in body section I create on Row by using .row class this row can accept 12 columns only.
Now In that row I define columns by using col class, The col-size represents extra small column break point in the Bootstrap framework.
In this example I created 12 columns with extra small break point in same row. You can observe it in the below out picture and more thing is in one row 12 columns are only acceptable means total column equals to 12 columns.
In this example I created six different rows with different column sizes in extra small column break point below I provide the output picture for you reference.

row-cols-auto class approach

This another approach for creating a Grid with extra small column break point. In this approach we use .row row-cols-auto Bootstrap class means This class is automatically combines shorthand classes. Means which automatically sets the number of columns within a row based on their content. In below example I created columns without providing any column size. Instead of providing column size .row row-cols-auto takes column size as number columns in the row like if you create 6 cols means the row have 6 columns.

Syntax:

<div class="row row-cols-auto">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
</div>

Example: This example shows the use of the row-cols-auto syntax.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        Extra Small</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
 
<style>
    .col {
        border: 1px solid white;
    }
 
    p {
        font-weight: 600;
    }
</style>
 
<body>
 
    <div class="container p-5 text-center text-white">
        <div class="row row-cols-auto">
            <p class="text-success p-2 ">
                Extra Small With 12 columns with in a Row  </p>
            <div class="col bg-success">
                <h1>1</h1>
            </div>
            <div class="col bg-success">
                <h1>2</h1>
            </div>
            <div class="col bg-success">
                <h1>3</h1>
            </div>
            <div class="col bg-success">
                <h1>4</h1>
            </div>
            <div class="col bg-success">
                <h1>5</h1>
            </div>
            <div class="col bg-success">
                <h1>6</h1>
            </div>
            <div class="col bg-success">
                <h1>7</h1>
            </div>
            <div class="col bg-success">
                <h1>8</h1>
            </div>
            <div class="col bg-success">
                <h1>9</h1>
            </div>
            <div class="col bg-success">
                <h1>10</h1>
            </div>
            <div class="col bg-success">
                <h1>11</h1>
            </div>
            <div class="col bg-success">
                <h1>12</h1>
            </div>
        </div>
 
        <div class="row row-cols-auto mt-3">
            <p class="text-success p-2 ">
                Extra Small With 6 columns with in a Row  </p>
            <div class="col bg-success">
                <h1>1</h1>
            </div>
            <div class="col bg-success">
                <h1>2</h1>
            </div>
            <div class="col bg-success">
                <h1>3</h1>
            </div>
            <div class="col bg-success">
                <h1>4</h1>
            </div>
            <div class="col bg-success">
                <h1>5</h1>
            </div>
            <div class="col bg-success">
                <h1>6</h1>
            </div>
        </div>
 
        <div class="row row-cols-auto mt-3">
            <p class="text-success p-2 ">
                Extra Small With 4 columns with in a Row  </p>
            <div class="col bg-success">
                <h1>1</h1>
            </div>
            <div class="col bg-success">
                <h1>2</h1>
            </div>
            <div class="col bg-success">
                <h1>3</h1>
            </div>
            <div class="col bg-success">
                <h1>4</h1>
            </div>
        </div>
 
        <div class="row row-cols-auto mt-3">
            <p class="text-success p-2 ">
                Extra Small With 3 columns with in a Row  </p>
            <div class="col bg-success">
                <h1>1</h1>
            </div>
            <div class="col bg-success">
                <h1>2</h1>
            </div>
            <div class="col bg-success">
                <h1>3</h1>
            </div>
        </div>
 
        <div class="row row-cols-auto mt-3">
            <p class="text-success p-2 ">
                Extra Small With 2 columns with in a Row  </p>
            <div class="col bg-success">
                <h1>1</h1>
            </div>
            <div class="col bg-success">
                <h1>2</h1>
            </div>
        </div>
 
        <div class="row row-cols-auto mt-3">
            <p class="text-success p-2 ">
                Extra Small With 1 columns with in a Row  </p>
            <div class="col2 bg-success">
                <h1>1</h1>
            </div>
        </div>
 
    </div>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
 
</html>

Output:

output

Explanation:

In the above HTML example first I created six rows by using row row-cols-auto
After that in each row I define different number columns like 12, 6, 4, 3, 1 you can try with other sizes also
This .row row-cols-auto Bootstrap class is automatically combines shorthand classes means columns. In same way Created columns by using .col class.
This row-auto class automatically adjusts the number of columns within a row based on the content.
This is particularly useful when you want the grid system to dynamically adjust the number of columns based on the content’s size.
In real time applications like Galleries, social media and others uses this approach for grid system.

Conclusion

Bootstrap 5 is a CSS framework, Which is used for creating Responsive web pages means The web page is adopted in any device like desktop, tablet and mobile phones and other screen sizes. The Bootstrap grid system is uses for creating a web pages for dynamic content adjustment with different layouts. Here I provide information about extra small column break point and It is represented with xs. This can be used for less then 576 px screen size like mobile phones. The Grid System is mostly used for adjust the content on the web page and it can support any screen sizes like desktop, mobile phone, table and other screen sizes. In real time applications like social media, Galleries web applications, and other types web applications uses Bootstrap Grid System with different column break points.

Suggest improvement

Bootstrap 5 Grid Small

Share your thoughts in the comments

Bootstrap 5 Grid Extra Small

col-{ number } within row class approach

Syntax:

HTML

Explanation:

row-cols-auto class approach

Syntax:

HTML

Explanation:

Conclusion

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?