Best IT Recipes

Add spacing between vertically stacked columns in Bootstrap 4

Unfortunately, it does not seem to be a good way to control the vertical spacing between columns that go from the horizontal stack to the vertical stack at certain breakpoints. There seems to be a solution when the form is involved , but that is not the point. I tried this solution , but it does not work when multiple columns are wrapped in a row.

To illustrate my scenario, here is 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/

With average device sizes (md) and higher, I would like for there to be an interval between the two “rows” of columns, but there would be no “second row” of columns between the “first row” of 3 columns. 3 columns. When the columns are vertically below the average device size (md), I would like to have a spacing between each of the columns, but none should be above the first child and not one below the last child.

Ideally, the solution will work regardless of how many columns (e.g. 3, 5, 6, 12) are contained in the row.

+8
html5 css3 twitter-bootstrap-4 bootstrap-4 spacing
Apr 04 '17 at 13:08 on
source share
4 answers

Here is how I ended this work:

 .row [class*="col-"] { @extend .mb-4; &:last-child { @extend .mb-0; } @extend .mb-md-5; &:nth-last-of-type(1), &:nth-last-of-type(2), &:nth-last-of-type(3) { @extend .mb-md-0; } }
0
Apr 6 '17 at 1:11
source share

Use the new Bootstrap 4 boot utility. For example, mb-3 adds margin-bottom to 1rem .
No extra CSS required.

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>

Interval utilities are responsive, so you can apply them to specific breakpoints (i.e. mb-0 mb-md-3 )

If you need a CSS solution , use the explanation in the appropriate 3.x question (this does not depend on the use of the form): https://jsfiddle.net/zdLy6jb1/2/

 /* css only solution */ [class*="col-"]:not(:last-child){ margin-bottom: 15px; }

Note: col-lg-4 is extraneous in your markup, since col-lg-4 col-md-4 ,
same as col-md-4 .

+29
Apr 04 '17 at 13:37 on
source share

see snippet below or jsfiddle

it will work no matter how many columns or rows you have

first (on the big screen) all rows have margin-bottom except the last one, then on the middle screen the rows will not have any field, and for the columns all will have margin-bottom, except for the last col from the last row

 .row { margin-bottom:30px; } .row:last-child{ margin-bottom:0; } .row [class*="col-"] { border:1px solid red; } @media only screen and (max-width: 768px) { .row { margin:0 } .row [class*="col-"] { margin-bottom:30px; } .row:last-child [class*="col-"]:last-child{ margin-bottom:0; } } 
 <body> <h1 class="display-3"> hey </h1> <div class="container"> <div class="row"> <div class="col-md-4 col-lg-4"> col 1 </div> <div class="col-md-4 col-lg-4"> col 2 </div> <div class="col-md-4 col-lg-4"> col 3 </div> </div> <div class="row"> <div class="col-md-4 col-lg-4"> col 4 </div> <div class="col-md-4 col-lg-4"> col 5 </div> <div class="col-md-4 col-lg-4"> col 6 </div> </div> </div> </body>
+1
Apr 04 '17 at 13:37 on
source share

I ended up with this solution:

 @include media-breakpoint-down(xs) { [class*="col-sm"]:not(:last-child){ margin-bottom: 15px; } } @include media-breakpoint-down(sm) { [class*="col-md"]:not(:last-child){ margin-bottom: 15px; } } @include media-breakpoint-down(md) { [class*="col-lg"]:not(:last-child){ margin-bottom: 15px; } }
0
Nov 11 '18 at 15:54
source share


More articles:


All Articles