How to add spacing between columns in Bootstrap 5?

Question

As you can see in the picture, I can't put a space between the red and blue columns. I tried many Bootstrap classes, but I couldn't get the result I wanted. I added m-4 to the Navbar, Header and the sections below. When I add a few divs in the row, the left and right length (in m-4 equal) is distorted. I want to keep the left and right spacing fixed and adjust the spacing of the columns inside. How will I do this?

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<header>
    <div class="m-4 px-4" style="background-color: white; border-radius: 10px;"></div>
</header>
<section id="first">
    <div class="m-4 px-4 py-5 smashinglogo" style="border-radius: 10px;"></div>
</section>
<section>
    <div class="m-4 row" style="background-color: white; border-radius: 10px;">
        <div class="col-lg-6 p-4" style="background-color: red; border-radius: 10px;">
            example
        </div>
        <div class="col-lg-6 p-4" style="background-color: blue; border-radius: 10px;">
            example
        </div>
    </div>
    <div class="m-4 row" style="background-color: white; border-radius: 10px;">
        <div class="col-lg-3 p-4" style="background-color: red; border-radius: 10px;">
            example
        </div>
        <div class="col-lg-3 p-4" style="background-color: red; border-radius: 10px;">
            example
        </div>
        <div class="col-lg-3 p-4" style="background-color: blue; border-radius: 10px;">
            example
        </div>
        <div class="col-lg-3 p-4" style="background-color: blue; border-radius: 10px;">
            example
        </div>
    </div>
</section>

score 0 · Answer 1 · answered Feb 07 '22 at 05:53

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<header>
  <div
    class="m-4 px-4"
    style="background-color: white; border-radius: 10px"
  ></div>
</header>

<section class="container-fluid p-4">
  <h1>With Proper Bootstrap - Structure</h1>

  <div class="row" style="background-color: white; border-radius: 10px">
    <div class="col-lg-6 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-6 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
  </div>
  <div class="row mt-4" style="background-color: white; border-radius: 10px">
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
  </div>
</section>

score 0 · Accepted Answer · edited Feb 07 '22 at 09:55

All you need to use gutter class like gx-1 for gap between two columns:

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<header>
  <div
    class="m-4 px-4"
    style="background-color: white; border-radius: 10px"
  ></div>
</header>

<section class="container-fluid p-4">
  <h1>With Proper Bootstrap - Structure</h1>

  <div class="row gx-4" style="background-color: white; border-radius: 10px">
    <div class="col-lg-6 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-6 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
  </div>
  <div class="row mt-4" style="background-color: white; border-radius: 10px">
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
  </div>
</section>

There was no distortion in the spaces on the right and left. Thank you so much — Erdil, Feb 07 '22 at 15:05

score -1 · Answer 3 · answered Feb 07 '22 at 04:31

With some template changes you can achieve this.

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<header>
    <div class="m-4 px-4" style="background-color: white; border-radius: 10px;"></div>
</header>

<section id="first">
    <div class="m-4 px-4 py-5 smashinglogo" style="border-radius: 10px;"></div>
</section>
<section>
    <div class="m-4 row" style="background-color: white; border-radius: 10px;">
        <div class="col-lg-6 p-1">
            <div class="p-4" style="background-color: red; border-radius: 10px;">
                example
            </div>
        </div>
        <div class="col-lg-6 p-1">
            <div class="p-4" style="background-color: blue; border-radius: 10px;">
                example
            </div>
        </div>
    </div>
    <div class="m-4 row" style="background-color: white; border-radius: 10px;">
        <div class="col-lg-3 p-1">

            <div class="p-4" style="background-color: red; border-radius: 10px;">
                example
            </div>
        </div>
        <div class="col-lg-3 p-1">
            <div class="p-4" style="background-color: red; border-radius: 10px;">
                example
            </div>
        </div>
        <div class="col-lg-3 p-1">
            <div class="p-4" style="background-color: blue; border-radius: 10px;">
                example
            </div>
        </div>
        <div class="col-lg-3 p-1">
            <div class="p-4" style="background-color: blue; border-radius: 10px;">
                example
            </div>
        </div>
    </div>
</section>

How to add spacing between columns in Bootstrap 5?

3 Answers3