Add spacing between vertically stacked columns in Bootstrap 4

by

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.

More Related Contents:

  1. Align the form to the center in Bootstrap 4 [duplicate]
  2. My Website is Mirror-flipped on iPhone Devices
  3. Which way to implement this picture in HTML CSS code and bootstrap
  4. Trying to work on responsiveness of login form
  5. Bootstrap row with columns of different height
  6. `col-xs-*` not working in Bootstrap 4
  7. Bootstrap 4: Multilevel Dropdown Inside Navigation
  8. Animate/Shrink NavBar on scroll using Bootstrap
  9. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  10. How to center nav-items in Bootstrap? [duplicate]
  11. Create a responsive navbar sidebar “drawer” in Bootstrap?
  12. Bootstrap 4 row fill remaining height
  13. Bootstrap 4 Cards of same height in columns
  14. How to make Bootstrap 4 cards the same height in card-columns?
  15. Bootstrap – align button to the bottom of card
  16. Bootstrap 4 – Sticky footer – Dynamic footer height
  17. Bootstrap 4 – Responsive cards in card-columns
  18. Center Navbar links without brand pushing it to the right in Bootstrap 4?
  19. How to center cards in bootstrap 4?
  20. Bootstrap navbar link color won’t change
  21. Empty vertical space between columns in Bootstrap 4
  22. bootstrap 3 to bootstrap 4 cols no longer horizontally aligned [duplicate]
  23. Bootstrap navbar: nothing is displayed on smaller devices
  24. Why are some of my CSS rules not working?
  25. Why aren’t my bootstrap 4 columns the same height?
  26. CSS float-right not working in Bootstrap 4 Navbar [duplicate]
  27. How to make Bootstrap cards the same height in card-columns?
  28. How to make moving CSS objects like this?
  29. CSS hide scroll bar if not needed
  30. click link below a higher z-index div [duplicate]

Leave a Comment