My goal is quite simple - I just want to create a small gap of 10 pixels between each column item in a row. It seems like something as basic as this should be included in Bootstrap, but I can't seem to locate it in the documentation.
Every time I search for a solution, all I find are messy hacks involving extra divs and classes.
Is there an elegant or built-in method to achieve such a straightforward design?
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);
}