Use the new Bootstrap 4 spacing utilities. For example mb-3
adds margin-bottom of 1rem
.
No extra CSS is needed.
http://www.codeply.com/go/ECnbgvs9Ez
<div class="container">
<div class="row">
<div class="col-md-4 mb-3">
col 1
</div>
<div class="col-md-4 mb-3">
col 2
</div>
<div class="col-md-4 mb-3">
col 3
</div>
<div class="col-md-4 mb-3">
col 4
</div>
<div class="col-md-4 mb-3">
col 5
</div>
<div class="col-md-4">
col 6
</div>
</div>
</div>
The spacing utils are responsive so you can apply them for specific breakpoints (ie; mb-0 mb-md-3
)
If you want a CSS solution, use the solution explained in the related 3.x question (it’s
not dependent on using a form): https://jsfiddle.net/zdLy6jb1/2/
/* css only solution */
[class*="col-"]:not(:last-child){
margin-bottom: 15px;
}
Note: the col-lg-4
is extraneous in your markup since col-lg-4 col-md-4
,
is the same as col-md-4
.