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.