Bootstrap 5 provides several ways to create flexible, responsive column layouts using its grid system. You can define column widths, distribute space equally, size columns according to their content, or control the number of columns per row. These layouts can also adapt to different screen sizes using responsive classes.
Basic CSS Layout Concepts
- CSS Grid (2017): Arranges elements in two dimensions (rows and columns). Example: display: grid;
- Flexbox (2012): Arranges and aligns elements in one direction (row or column). Example: display: flex;
- Float (1996): Floats elements left or right, allowing text to wrap around them. Example: float: left;
Bootstrap 5 Layout Systems
Bootstrap 5 provides several systems and utilities for creating responsive layouts:
- Bootstrap Grid (Flexbox): Uses .row, .col-* and .row-cols-* to create responsive column layouts. The main system covered in this article.
- Containers: Uses .container and .container-fluid to control content width and horizontal alignment.
- CSS Grid: Uses .grid and .g-col-* as an alternative column layout system. Disabled by default and requires enabling through Sass.
- Flexbox Utilities: Uses .d-flex, .flex-column and .justify-content-* to control element alignment and arrangement.
Five Bootstrap 5 Column Layout Methods
The following five methods demonstrate how to create Bootstrap 5 column layouts, from explicitly defined and automatically distributed widths to content-based and responsive arrangements. These examples show only the rows and columns. In a complete layout, place each .row inside a .container or .container-fluid.
1. Explicit columns: set each column’s width
<div class="row">
<div class="col-6">Half</div>
<div class="col-6">Half</div>
</div>
2. Automatic columns: divide the width equally
<div class="row">
<div class="col">Half</div>
<div class="col">Half</div>
</div>3. Row columns: set the column count on the row
<div class="row row-cols-2">
<div class="col">Half</div>
<div class="col">Half</div>
</div>4. Content-sized columns: width follows the content
<div class="row">
<div class="col-auto">Short text</div>
<div class="col">Remaining space</div>
</div>5. Responsive row columns: change the column count depending on screen size
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>> In this example: Below 768px (Extra small and small screens): 1 column / 768–991px (Medium screens): 2 columns / 992px and above (Large screens): 3 columns
Bootstrap 5 Grid Breakpoints
Bootstrap 5 uses breakpoints to adjust column sizes and layouts according to the browser window width.
Default Breakpoints (xs, sm, md, lg, xl, xxl)
Bootstrap 5 includes six default breakpoints, based on the width of the browser window (viewport).
Breakpoint: Screen width:
- xs (Extra small): Below 576px
- sm (Small): 576px and above
- md (Medium): 768px and above
- lg (Large): 992px and above
- xl (Extra large): 1200px and above
- xxl (Extra extra large): 1400px and above
> These breakpoints are not tied to specific devices. They allow layouts to adapt to different screen widths, including mobiles, tablets and desktops.
Mobile-First Approach
Bootstrap 5 follows a mobile-first approach, meaning layouts are designed for smaller screens first and then adjusted for larger screens.
- Classes without a breakpoint, such as col-6, apply to all screen sizes.
- Classes with a breakpoint, such as col-md-6, apply from that breakpoint upwards.
- A breakpoint setting remains active on larger screens unless another class overrides it.
> For example, col-md-6 creates a full-width column below 768px and a half-width column from 768px upwards.
> CSS Media Queries: For mobile-first development, use min-width rather than max-width where practical. Define the default styles for smaller screens first, then use min-width to adjust layouts for larger screens. max-width remains useful when specifically targeting smaller screens.
Responsive Column Widths
You can combine multiple breakpoint classes on the same column to change its width at different screen sizes.
For example, col-12 col-md-6 col-lg-4 means:
- Below 768px: Full width (12/12).
- 768px to 991px: Half width (6/12).
- 992px and above: One-third width (4/12).
> This allows columns to stack on smaller screens and appear side by side on larger screens.
Column Alignment (Horizontal and Vertical)
Bootstrap 5 uses Flexbox to align columns horizontally and vertically within a row, without changing their widths.
- Horizontal Alignment (justify-content-*): Add to .row to position columns using start, center, end, between, around or evenly.
- Vertical Alignment (align-items-*): Add to .row to align columns using start (top), center (middle) or end (bottom).
- Individual Column Alignment (align-self-*): Add to individual columns to control their vertical alignment using start, center or end.
> Alignment supports responsive breakpoints, such as justify-content-md-center or align-items-lg-center. Horizontal alignment requires available space, while vertical alignment requires extra height.
Column Offsets
Bootstrap 5 offsets add empty space before a column, shifting it horizontally within the 12-column grid.
- offset-1, offset-3, offset-6: Shift a column by 1, 3 or 6 grid units.
- offset-md-2: Applies a 2-unit offset from 768px upwards.
- offset-lg-0: Removes the offset from 992px upwards.
> For example, offset-md-2 offset-lg-0 adds an offset on medium screens and removes it on large screens.
Column Ordering
Bootstrap 5 allows columns to change their visual order without changing the HTML structure.
- order-first: Moves a column to the beginning.
- order-last: Moves a column to the end.
- order-0 to order-5: Sets the column order (0 is the default).
- order-md-first: Moves a column to the beginning from 768px upwards.
- order-lg-last: Moves a column to the end from 992px upwards.
> Accessibility: Ordering classes change only the visual position of columns, not their HTML source order, which remains important for accessibility and keyboard navigation.
Nested Rows and Columns
Bootstrap 5 allows rows and columns to be nested to create more complex layouts.
- Basic Nested Grid Structure: Place a .row inside a .col-*, then add more columns inside the nested row.
- Nested Column Widths: Each nested row uses its own 12-column grid, based on the width of its parent column.
- Gutters in Nested Grids: Nested rows have their own gutters. Use g-*, gx-* or gy-* to adjust the spacing between nested columns.
Common Grid Layout Mistakes
- Incorrect Container, Row and Column Structure: Use .container (or .container-fluid) → .row → .col-*. For nested grids, place .row inside a column.
- Columns Exceeding 12 Grid Units: Columns exceeding 12 units wrap onto a new line.
- Incorrect or Missing Gutters: Use g-* (both directions), gx-* (horizontal) or gy-* (vertical). Default: 1.5rem horizontal and no vertical gutters. Use g-0 to remove gutters or g-2 g-md-4 for responsive spacing.
- Mixing Fixed and Automatic Column Widths: Combining .col, .col-auto and .col-* can produce unexpected widths.
- Overlooking Responsive Layouts: Use responsive classes and test different screen widths.
WORDPRESS GRID (Separate from Bootstrap)
WordPress includes its own CSS Grid layout through the Group block’s Grid variation, independently of Bootstrap. Set the number of columns in the block’s layout settings. WordPress generates the necessary CSS Grid styles, so Bootstrap .row and .col-* classes are not required.
Example: A WordPress Grid with two columns:
<!-- wp:group {"layout":{"type":"grid","columnCount":2}} -->
<div class="wp-block-group">
<!-- wp:paragraph -->
<p>First column</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Second column</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->> A fixed two-column grid does not automatically stack into one column on mobile. Additional responsive styling may be needed.
WordPress Columns with Bootstrap-Style Layout
Apply the following CSS to all WordPress Columns blocks to create equal-width columns with Bootstrap-style spacing (1.5rem). Columns stack below 576px and appear side by side from 576px upwards. No additional CSS classes are required. The :root selector is included only to increase specificity, helping these rules override WordPress’s default Columns styles.
CSS example:
/* WordPress Columns: equal widths from 576px, stacked below */
:root body .wp-block-columns {
flex-wrap: wrap !important;
gap: 1.5rem !important;
}
:root body .wp-block-columns > .wp-block-column {
min-width: 0;
flex: 0 0 100% !important;
}
@media (min-width: 576px) {
:root body .wp-block-columns > .wp-block-column {
flex: 1 1 0% !important;
}
}> This uses native CSS Flexbox, not Bootstrap’s grid classes. It applies to all WordPress Columns blocks, overrides custom column widths and mobile stacking settings, and changes the usual stacking breakpoint from 782px to 576px. The CSS uses gap for spacing, avoiding negative margins.