How To Add Space Between Columns In Bootstrap - Code Helpers

• Overview
• Gutters docs
• Grid docs

How to add space between columns in Bootstrap

To add space between columns in Bootstrap use gutter classes. With gutters you can add horizontal or vertical space or even specify how big space should be on different screen size.

To learn more read Gutter Docs.

How they work

• Gutters are the gaps between column content, created by horizontal padding. We set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content.

• Gutters start at 1.5rem (24px) wide. This allows us to match our grid to the padding and margin spacers scale.

• Gutters can be responsively adjusted. Use breakpoint-specific gutter classes to modify horizontal gutters, vertical gutters, and all gutters.

Horizontal gutters

.gx-* classes can be used to control the horizontal gutter widths. The .container or .container-fluid parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we’ve increased the padding with .px-4:

Custom column padding Custom column padding

• HTML

<div class="container px-4"> <div class="row gx-5"> <div class="col"> <div class="p-3">Custom column padding</div> </div> <div class="col"> <div class="p-3">Custom column padding</div> </div> </div> </div>

An alternative solution is to add a wrapper around the .row with the .overflow-hidden class:

Custom column padding Custom column padding

• HTML

<div class="container overflow-hidden"> <div class="row gx-5"> <div class="col"> <div class="p-3">Custom column padding</div> </div> <div class="col"> <div class="p-3">Custom column padding</div> </div> </div> </div>

Vertical gutters

.gy-* classes can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the .row at the end of a page. If this occurs, you add a wrapper around .row with the .overflow-hidden class:

Custom column padding Custom column padding Custom column padding Custom column padding

• HTML

<div class="container overflow-hidden"> <div class="row gy-5"> <div class="col-6"> <div class="p-3">Custom column padding</div> </div> <div class="col-6"> <div class="p-3">Custom column padding</div> </div> <div class="col-6"> <div class="p-3">Custom column padding</div> </div> <div class="col-6"> <div class="p-3">Custom column padding</div> </div> </div> </div>

TAILWIND

GIFT for 2026

Purchase anything during the New Years Sale and get a Tailwind UI kit gift!

CLAIM GIFT

• Introduction
• How they work
• Horizontal gutters
• Vertical gutters

Access restricted

To view this section you must have an active PRO account

Log in to your account or purchase an MDB5 PRO subscription if you don't have one.

Login Buy MDB Pro Close