Add spacing between vertically stacked columns in Bootstrap 4

Question

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 breakpo

Answer 1

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

    

      

        col 1
      
      

        col 2
      
      

        col 3
      
      

        col 4
      
      

        col 5
      
      

        col 6
      
    

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.