Adding a simple spacer to twitter bootstrap

Question

I m using twitter-bootstrap  with LESS and Rails   I want to add a simple spacer to my CSS that appears between the grid rows to space things out a bit better  I couldn t find anything in the bootstrap that does it for me so I figured I could just add a spacer div with a margin-top defined   I took the following code in my bootstrap override file     spacer    margin-top  40px      but all the margins seem to bunch together at the top of the page and not between the grid  I m sure its a position attribute I m missing somewhere please help   I m open to any other suggestions on a better way to achieve this  or if t-bootstrap has anything already that I have missed   Thanks

User · Answer

In Bootstrap 4 you can use classes like mt-5, mb-5, my-5, mx-5 (y for both top and bottom, x for both left and right).

According to their site:

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Link: https://getbootstrap.com/docs/4.0/utilities/spacing/

User · Answer

My approach  Tricky  but works well for me   lt p gt  amp nbsp  lt  p gt

User · Answer

You can add a class to each of your  row divs to add some space in between them like so    spacer       margin-top  40px     define margin as you see fit        You can then use it like so    lt div class  row spacer  gt      lt div class  span4  gt     lt  div gt      lt div class  span4  gt     lt  div gt      lt div class  span4  gt     lt  div gt   lt  div gt    lt div class  row spacer  gt      lt div class  span4  gt     lt  div gt      lt div class  span4  gt     lt  div gt      lt div class  span4  gt     lt  div gt   lt  div gt

[css] Adding a simple spacer to twitter bootstrap

Examples related to css

Examples related to ruby-on-rails-3

Examples related to twitter-bootstrap