Html Question posted in
Some basic documentation can be found here.

Html – Adding margins between Bootstrap columns

I have columns in Bootstrap 5 something like the following.

<div class="row">
    <div class="col-md-3 mb-3 border rounded">
        <p>Column 1</p>
    </div>
    <div class="col-md-3 mb-3 border rounded">
        <p>Column 2</p>
    </div>
    <div class="col-md-3 mb-3 border rounded">
        <p>Column 3</p>
    </div>
    <div class="col-md-3 mb-3 border rounded">
        <p>Column 4</p>
    </div>
</div>

With a border, I can see that there is no spacing between columns. So I changed the top-level <div> to have class="row gap-3".

This correctly gives me a space between each column. However, it also causes the 4th column to wrap.

Is there any way to put a space between each column but not change the number of columns per row?

Tags:

2

Answers


  1. 0

    MrUpsidown’s answer is the preferred solution shown in the Bootstrap documentation. However, column gap can work well with single breakpoints and has simpler html.

    Using Gap with Columns

    Using gap with fixed size columns causes unwanted column wrapping. The key to making it work is to use auto-sizing columns that adjust to the gap.

    By using col rather than col-3, the columns adjust to fit the available space. If the columns need to flip to rows at a specific breakpoint, then use col-<breakpoint> without a column width, e.g., col-lg

    (The demo does not specify a breakpoint so that it works in the snippet.)

    <div class="row gap-3 text-center">
  <div class="col border">C1</div>
  <div class="col border">C2</div>
  <div class="col border">C3</div>
  <div class="col border">C4</div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    Login or Signup to reply.
  2. 0

    Don’t add borders to the columns themselves. Create an element within the column and style this one instead. This way, everything will look just right, at any breakpoint.

    You can easily change the width of the gutter with gx-* helper classes on the row element. See https://getbootstrap.com/docs/5.3/layout/gutters/#horizontal-gutters

    Note that if you are using larger gutters (.gx-5), the docs states that

    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.

    and

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

    What that means is that horizontal scrollbars may appear at certain window sizes if you don’t apply one of these solutions. I would choose the overflow-hidden solution as it doesn’t change the main container padding.

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="container-fluid overflow-hidden">

  <!-- Smaller gutter -->
  
  <h3>Smaller gutter</h3>

  <div class="row gx-3 text-center">
    <div class="col-4 mb-3">
      <div class="border rounded p-3">Column 1</div>
    </div>
    <div class="col-4 mb-3">
      <div class="border rounded p-3">Column 2</div>
    </div>
    <div class="col-4 mb-3">
      <div class="border rounded p-3">Column 3</div>
    </div>
  </div>
  
  <!-- Default gutter -->
  
  <h3>Default gutter</h3>

  <div class="row text-center">
    <div class="col-4 mb-3">
      <div class="border rounded p-3">Column 1</div>
    </div>
    <div class="col-4 mb-3">
      <div class="border rounded p-3">Column 2</div>
    </div>
    <div class="col-4 mb-3">
      <div class="border rounded p-3">Column 3</div>
    </div>
  </div>
  
  <!-- Larger gutter -->
  
  <h3>Larger gutter</h3>

  <div class="row gx-5 text-center">
    <div class="col-4 mb-3">
      <div class="border rounded p-3">Column 1</div>
    </div>
    <div class="col-4 mb-3">
      <div class="border rounded p-3">Column 2</div>
    </div>
    <div class="col-4 mb-3">
      <div class="border rounded p-3">Column 3</div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search