Menu
Unfortunately, there doesn't seem to be a good way to manage vertical spacing between columns that transition from a horizontal stack to a vertical stack at certain breakpoints. There does seem to be a solution when a form is involved, but that's not the situation here. I've tried this solution, but it doesn't work when there are multiple columns that wrap in a row.
To illustrate my scenario, here's the structure of my HTML:
<body> <div class="container"> <div class="row"> <div class="col-md-4"> col 1 </div> <div class="col-md-4"> col 2 </div> <div class="col-md-4"> col 3 </div> <div class="col-md-4"> col 4 </div> <div class="col-md-4"> col 5 </div> <div class="col-md-4"> col 6 </div> </div> </div> </body> https://jsfiddle.net/b74a3kbs/6/
At medium-device size (md) and above, I'd like there there to be spacing between the two "rows" of columns, but no spacing above the "first row" of 3 columns and none below the "second row" of 3 columns. When the columns stack vertically at below the medium-device size (md), I'd like there to be spacing between each of the columns, but none above the first child and none below the last child.
Ideally, the solution would work regardless of how many columns (e.g., 3, 5, 6, 12) are contained within the row.
306
To add space between columns in Bootstrap use gutter classes. With gutters you can add horizontal or vertical space or even specify how big space should be on different screen size.
If you need to separate rows in bootstrap, you can simply use . form-group . This adds 15px margin to the bottom of row.
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.
87
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
