Gutter in Bootstrap 5 with Examples

Gutter in Bootstrap refer to the space between columns within the grid system. Bootstrap 5 offers flexible way to easily control the gutter sizes or remove them entirely.

The grid system uses gutters for columns padding to separate content and create a clean design and layout.

How Gutters Work in Bootstrap 5

By default, gutters are set 1.5rem(24px) horizontally and vertically. However, Bootstrap 5 allows you to:

• Customize the gutter size using utility classes.
• Add or remove gutters based on screen sizes.
• Use horizontal or vertical gutters separately.

Default Gutters Example

By default, the following code will have a gutter between the columns.

In the above example, each columns will have 1.5rem space between them.

Gutters Control Utility Classes

Bootstrap 5.3 introduces the given below classes to control gutters:-

• .g-{size}: Controls both horizontal and vertical gutters.
• .gx-{size}: Controls horizontal gutters only (left and right).
• .gy-{size}: Controls vertical gutters only (top and bottom).
• .g-0: Removes all gutters.

Available gutter sizes:

• 0: No gutters
• 1: 0.25rem gutters (4px)
• 2: 0.5rem gutters (8px)
• 3: 1rem gutters (16px)
• 4: 1.5rem gutters (24px)
• 5: 3rem gutters (48px)

Controlling Both Horizontal and Vertical Gutters

Explanation
The .g-3 applies 1rem (16px) padding between the columns both horizontally and vertically.

Controlling Only Horizontal Gutters

Explanation
The .gx-5 applies 3rem (48px) padding between the columns only horizontally and keeps the vertical gutter default.

Controlling Only Vertical Gutters

Explanation
The .gy-2 applies 0.5 rem (8px) padding between the columns only vertically and keeps the horizontal gutter default.

Removing Gutters Completely

Explanation
The .g-0 removes both vertically and horizontal gutter completely.

Responsive Gutter Control

You can apply different gutter sizes for different screen sizes using response breakpoints (sm, md, lg, xl, xxl, )

Explanation

• On small screens, the gutter .g-3 applies 1rem (16px).
• On medium screens and larger, the gutter increases to 3rem (48px) with .g-md-5.

Summary of Gutter Control Options

• .g-{size}: Controls both vertical and horizontal gutters.
• .gx-{size}: Controls horizontal gutters only.
• .gy-{size}: Controls vertical gutters only.
• Responsive control: Use .g-breakpoint-{size} for different screen sizes.
• Removing gutters: Use .g-0 to remove all gutters.

You can easily create flexible and responsive layouts using these gutter options.

Complete Layout Example with Gutter Control

Here’s a complete webpage layout example using Bootstrap 5.3 that showcases how to control gutters across multiple sections. This layout includes a header, main content, sidebar, and footer, and demonstrates different gutter controls for horizontal and vertical spacing.