0

What I want to achieve is super simple. I want a couple of pixel gap, lets say 10 between each column item in a row. Surely bootstrap comes with something as simple as this but I can't seem to find it in the documentation.

Whenever I google for something similar all I get is dodgy hacks and a mass of extra divs and classes.

Is there a built in or elegant way to achieve something so simple?

HTML

<div class="container">
  <div class="row">
    <div class="col-md-2 content">
      1 of 2
    </div>
    <div class="col-md-10 content">
      2 of 2
    </div>
  </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.content{
  background-color: #ffffff;
  padding: 20px;
  border-radius: 5px;
  background-clip: padding-box;
  margin-bottom: 20px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.06);
 }

Codpen: https://codepen.io/anon/pen/vjPYJy

twigg
  • 3,753
  • 13
  • 54
  • 96
  • Do you mean horizontal spacing between columns? – Carol Skelly May 21 '18 at 17:15
  • 1
    Columns already *have* a horizontal padding between each one. The only reason you're not seeing it is because you're applying `.content` to the column, instead of using it as its own child element. – Robert May 21 '18 at 17:17

1 Answers1

1

As an option - reformat your html and use bootstrap spacing:

<div class="col-md-2 p-0">
  <div class="content mr-2">
     1 of 2
  </div>
</div>
<div class="col-md-10 p-0">
  <div class="content ml-2">
     2 of 2
  </div>
</div>
IP_
  • 676
  • 5
  • 18