How To Add Space Between Bootstrap Columns?

Ethan D. -

Problem: Lack of Space Between Bootstrap Columns

Bootstrap columns often appear too close together, creating a crowded layout. This can make content hard to read and affect the design of a webpage.

Basic Solution: Adding Padding and Margin

Using Custom CSS Classes

A simple solution to add space between Bootstrap columns is to create and use custom CSS classes. This method lets you control the spacing without changing the column structure.

To use this approach:

  1. Create a custom CSS class:

    .column-spacing {
padding: 10px;
margin: 10px;
}

  2. Apply the class to inner divs within your columns:

    <div class="row">
<div class="col-md-6">
<div class="column-spacing">
  Content for column 1
</div>
</div>
<div class="col-md-6">
<div class="column-spacing">
  Content for column 2
</div>
</div>
</div>

This method keeps the original column structure intact while adding the spacing you want. You can adjust the padding and margin values as needed for your layout.

Tip: Responsive Spacing

For responsive designs, consider using Bootstrap's built-in spacing utilities. You can add classes like 'p-3' for padding or 'm-3' for margin directly to your columns. These classes apply different spacing sizes based on screen size:

<div class="row">
  <div class="col-md-6 p-3 m-3">
    Content for column 1
  </div>
  <div class="col-md-6 p-3 m-3">
    Content for column 2
  </div>
</div>

Alternative Methods

Adjusting Column Widths

You can add space between Bootstrap columns by adjusting their widths and using offset classes. Instead of using col-md-6 for two equal columns, use col-md-5 and add an offset:

<div class="row">
  <div class="col-md-5">Column 1</div>
  <div class="col-md-5 offset-md-2">Column 2</div>
</div>

This method has pros and cons:

Pros:

  • Easy to implement
  • Uses Bootstrap classes

Cons:

  • Less flexible for responsive designs
  • May create uneven spacing on different screens

Tip: Responsive Offset Adjustment

For better responsiveness, use different offset classes for various screen sizes:

<div class="row">
  <div class="col-md-5">Column 1</div>
  <div class="col-md-5 offset-md-2 offset-lg-1">Column 2</div>
</div>

This adjusts the spacing between columns on medium and large screens.

Using Bootstrap's Spacing Utilities

Bootstrap offers spacing utility classes to add margins and padding to columns:

  • m-* classes add margin
  • p-* classes add padding
  • x suffix for horizontal spacing (left and right)
  • y suffix for vertical spacing (top and bottom)

Examples:

<div class="row">
  <div class="col-md-6 px-3">Column with horizontal padding</div>
  <div class="col-md-6 mx-2">Column with horizontal margin</div>
</div>

You can combine these classes for more control:

<div class="row">
  <div class="col-md-6 px-3 my-2">Column with padding and margin</div>
  <div class="col-md-6 px-3 my-2">Column with padding and margin</div>
</div>

Advanced Techniques

Creating a Gutter System

To create a custom gutter system in Bootstrap, you can use negative margins and padding. This method gives you more control over the spacing between columns and works well for responsive designs.

Here's how to implement a custom gutter system:

  1. Add a container class with negative margins:

    .gutter-container {
margin-left: -15px;
margin-right: -15px;
}

  2. Create a column class with padding:

    .gutter-col {
padding-left: 15px;
padding-right: 15px;
}

  3. Apply these classes to your HTML:

    <div class="row gutter-container">
<div class="col-md-6 gutter-col">Column 1</div>
<div class="col-md-6 gutter-col">Column 2</div>
</div>

This custom gutter system offers benefits for responsive designs:

  • Consistent spacing across screen sizes
  • Easy to adjust gutter width by changing the CSS values
  • Works with Bootstrap's grid system

Tip: Adjusting Gutter Width

To change the gutter width, modify the margin and padding values in your CSS. For example, to create a 30px gutter:

.gutter-container {
  margin-left: -30px;
  margin-right: -30px;
}

.gutter-col {
  padding-left: 30px;
  padding-right: 30px;
}

This allows you to easily customize the spacing between columns to fit your design needs.

Using Flexbox for Column Spacing

Bootstrap 4 and later versions use Flexbox for their grid system. You can use Flexbox properties to control the spacing between columns.

To use Flexbox for column spacing:

  1. Add the d-flex class to your row:

    <div class="row d-flex">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>

  2. Use Flexbox utility classes to adjust spacing:

    • justify-content-between adds space between columns
    • justify-content-around adds space around columns

Example:

<div class="row d-flex justify-content-between">
  <div class="col-md-5">Column 1</div>
  <div class="col-md-5">Column 2</div>
</div>

You can also use the gap property for modern browsers:

.row {
  display: flex;
  gap: 20px;
}

This Flexbox approach provides:

  • More control over column alignment
  • Easy adjustment of spacing for different screen sizes
  • Compatibility with Bootstrap's responsive classes

Example: Vertical Alignment with Flexbox

You can use Flexbox to vertically align columns within a row. Here's an example:

<div class="row d-flex align-items-center" style="height: 200px;">
  <div class="col-md-4">
    <p>Short content</p>
  </div>
  <div class="col-md-4">
    <p>Taller content that takes up more vertical space</p>
  </div>
  <div class="col-md-4">
    <p>Short content</p>
  </div>
</div>

In this example, the align-items-center class vertically centers the columns within the row, regardless of their content height.