How to add 3px margin between bootstrap cols

Question

I want to add some space between blocks. I am using bootstrap grid system.

whem I add margin the third div gets down under block 1.

below is my code:

<div style='border:solid black 1px' class='col-md-6'>
  <h1>Block 1</h1>
</div>
<div style='border:solid black 1px' class='col-md-3'>
  <h1>Block 2</h1>
</div>
<div style='border:solid black 1px' class='col-md-3'>
  <h1>Block 3</h1>
</div>

Answer 1

You will need to use the col-md class and eventually an mx-md-1 class or set margin yourself .

here is an example to run in full page to resize & see breakpoints effect :

.row {/* for demo to show where is center & where it stands */
  border: solid;
  background: linear-gradient(to right, #4564 50%, #0008 50%)
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div style='border:solid black 1px' class=' col-md-6 '>
      <h1>Block 1</h1>
    </div>
    <div style='border:solid black 1px' class='  col-md mx-md-1'>
      <h1>Block 2</h1>
    </div>
    <div style='border:solid black 1px' class='  col-md-3 '>
      <h1>Block 3</h1>
    </div>
  </div>
</div>

col/col-sm/col-md/col-lg/col-xl classes will use the space avalaible without setting a width, only a breakpoints.