Bootstrap 5.3 Layout System

Bootstrap's layout system is built on flexbox and provides a powerful 12-column grid for creating responsive layouts. This skill covers containers, the grid system, breakpoints, and layout utilities.

Breakpoints

Bootstrap's responsive design uses six default breakpoints:

Breakpoint Class infix Dimensions Extra small None <576px Small sm ≥576px Medium md ≥768px Large lg ≥992px Extra large xl ≥1200px Extra extra large xxl ≥1400px

Breakpoints apply at the specified width and up (mobile-first).

Containers

Containers are the fundamental building block for layouts.

Container Types

...

100% until sm, then fixed

100% until md, then fixed

100% until lg, then fixed

100% until xl, then fixed

100% until xxl, then fixed

Container Max-Widths xs<576px sm≥576px md≥768px lg≥992px xl≥1200px xxl≥1400px .container 100% 540px 720px 960px 1140px 1320px .container-sm 100% 540px 720px 960px 1140px 1320px .container-md 100% 100% 720px 960px 1140px 1320px .container-lg 100% 100% 100% 960px 1140px 1320px .container-xl 100% 100% 100% 100% 1140px 1320px .container-xxl 100% 100% 100% 100% 100% 1320px .container-fluid 100% 100% 100% 100% 100% 100% Grid System

The grid uses a series of containers, rows, and columns.

Basic Structure

Column 1

Column 2

Column 3

Equal-Width Columns

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

Specific Column Widths

Use .col-{number} for specific widths (1-12):

8 columns wide

4 columns wide

3 columns

6 columns

3 columns

Responsive Columns

Combine breakpoint infixes for responsive behavior:

Left on md+

Right on md+

Responsive column

Auto-Layout Columns

Auto

6 columns

Auto

Variable width content

Row Columns

Control the number of columns per row:

Item 1

Item 2

Item 3

Item 4

Item

Gutters

Gutters are the gaps between columns. Default is 1.5rem (24px).

Horizontal Gutters (gx-*)

Wide horizontal gutters

Vertical Gutters (gy-*)

Vertical gutter when wrapping

Both Gutters (g-*)

Equal gutters

No gutters

Responsive Gutters

Responsive gutters

Column Alignment Vertical Alignment

...

Top

Middle

Bottom

Horizontal Alignment

...

Column Ordering Order Classes

First in DOM, last visually

Second

Third in DOM, first visually

Second on md+

First on md+

Offset Classes

Centered column

Pushed right

Nesting

Columns can be nested:

Level 1

Level 2

Advanced Grid Behaviors Column Wrapping

When more than 12 columns are placed within a single row, the extra columns wrap onto a new line as one unit:

.col-9

.col-4 (wraps to new line since 9 + 4 = 13 > 12)

.col-6 (continues on the new line)

Column Breaks

Force columns to a new line by inserting a full-width element:

Column 1

Column 2

Column 3 (on new line)

Column 4 (on new line)

Apply breaks at specific breakpoints using display utilities:

Column 1

Column 2

Column 3

Standalone Column Classes

Use .col-* classes outside a .row to give elements a specific width. When used outside a row, column padding is omitted:

.col-3: width of 25%

.col-sm-9: width of 75% above sm breakpoint

Combine with float utilities for responsive floated images:

Text wraps around the floated image...

Handling Gutter Overflow

Large gutters (like .gx-5) can cause horizontal overflow. Two solutions:

Add matching padding to the container:

Column with large gutter

Or use an overflow-hidden wrapper:

Column with large gutter

CSS Grid (Alternative)

Note: Bootstrap's CSS Grid system is experimental and opt-in as of v5.1.0. It's disabled by default and requires enabling in your Sass configuration.

Bootstrap 5.3 also supports CSS Grid:

Half width

1/3

2/3

Z-Index Utilities

Bootstrap provides z-index utility classes for controlling stacking order.

Utility Classes Class Value .z-n1 -1 .z-0 0 .z-1 1 .z-2 2 .z-3 3

These low single-digit values (1, 2, 3) are useful for controlling component states like default, hover, and active within the same stacking context.

Component Stacking Order

Bootstrap components use a standardized z-index scale with large gaps to prevent conflicts:

Component z-index Dropdown 1000 Sticky 1020 Fixed 1030 Offcanvas backdrop 1040 Offcanvas 1045 Modal backdrop 1050 Modal 1055 Popover 1070 Tooltip 1080 Toast 1090

Warning: Avoid customizing individual z-index values. The scale is designed as a cohesive system—if you change one value, you likely need to adjust others to maintain proper layering. Use Sass variables ($zindex-dropdown, $zindex-modal, etc.) to customize these values consistently.

See references/grid-reference.md for position utilities that work with z-index.

Common Layout Patterns Sidebar Layout

Main content

Card Grid

Card 1

Card 2

Sass Customization

When compiling Bootstrap from source, you can customize the layout system through Sass variables and mixins.

Key Variables // Override before importing Bootstrap $grid-columns: 12; // Change to 16 or 24 for finer control $grid-gutter-width: 1.5rem; // Adjust column gaps $enable-cssgrid: true; // Enable CSS Grid classes

Media Query Mixins // Mobile-first (applies at breakpoint and UP) @include media-breakpoint-up(md) { ... }

// Desktop-first (applies BELOW breakpoint) @include media-breakpoint-down(lg) { ... }

// Range (applies BETWEEN two breakpoints) @include media-breakpoint-between(sm, xl) { ... }

// Single breakpoint only @include media-breakpoint-only(md) { ... }

Grid Mixins

Create semantic grid layouts without utility classes:

.blog-layout { @include make-row(); }

.blog-main { @include make-col-ready(); @include make-col(8); // 8 of 12 columns }

.blog-sidebar { @include make-col-ready(); @include make-col(4); // 4 of 12 columns }

See references/sass-customization.md for complete variable reference and mixin documentation.

Additional Resources Reference Files references/grid-reference.md - Complete grid class reference references/sass-customization.md - Sass variables and mixins for layout customization Example Files examples/responsive-layouts.html - Responsive layout patterns examples/sass-customization.scss - Sass customization examples

bootstrap-layout

安装