Bootstrap adding gaps between divs

Question

If my page uses the Bootstrap class row  col-md-x and such to arrange the content  what would be the proper way to create a distance between each div containing a whole element semantically speaking   I am adding a div with a padding between the divs to simulate the gap  is this a good tactic or is there a better one

User · Answer

Starting from Bootstrap v4 you can simply add the following to your div class attribute: mt-2 (margin top 2)

<div class="mt-2 col-md-12">
        This will have a two-point top margin!
</div>

More examples are given in the docs: Bootstrap v4 docs

User · Answer

An alternative way to accomplish what you are asking  without having problems on the mobile version of your website   Remember that the margin attribute will brake your responsive layout on mobile version thus you have to add on your element a supplementary attribute like  media  min-width 768px    your-class  margin 0   to override the previous margin       is to nest your class in your preferred div and then add on your class   the margin option you want   like the following example  HTML   lt div class  container  gt     lt div class  col-md-3 col-xs-12  gt      lt div class  events  gt        lt img src        class  img-responsive  alt         gt        lt div class  figcaption  gt          lt h2 gt Event Title lt  h2 gt          lt p gt Event Description  lt  p gt        lt  div gt      lt  div gt     lt  div gt     lt div class  col-md-3 col-xs-12  gt      lt div class  events  gt       lt img src        class  img-responsive  alt         gt       lt div class  figcaption  gt        lt h2 gt Event Title lt  h2 gt        lt p gt Event Description   lt  p gt       lt  div gt      lt  div gt     lt  div gt     lt div class  col-md-3 col-xs-12  gt      lt div class  events  gt       lt img src        class  img-responsive  alt         gt       lt div class  figcaption  gt        lt h2 gt Event Title lt  h2 gt        lt p gt Event Description   lt  p gt       lt  div gt      lt  div gt     lt  div gt   lt  div gt    And on your CSS you just add the margin option on your class which in this example is  events  like    events  margin  20px 10px      By this method you will have all the wanted space between your divs making sure you do not brake anything on your website s mobile and tablet versions

User · Answer

Adding a padding between the divs to simulate a gap might be a hack  but why not use something Bootstrap provides  It s called offsets  But again  you can define a class in your custom css  you shouldn t edit the core stylesheet anyway  file and add something like  gap  However   col-md-offset-  does the job most of the times for me  allowing me to precisely leave a gap between the divs   As for vertical spacing  unfortunately  there isn t anything set built-in like that in Bootstrap 3  so you will have to invent your own custom class to do that  I d usually do something like  top-buffer   margin-top 20px     This does the trick  and obviously  it doesn t have to be 20px  it can be anything you like

User · Answer

I required only one instance of the vertical padding  so I inserted this line in the appropriate place to avoid adding more to the css   lt div style  margin-top 5px  gt  lt  div gt

User · Answer

The easiest way to do it is to add mb-5 to your classes  That is  lt div class  row mb-5  gt   NOTE   mb varies betweeen 1 to 5 The Div MUST have the row class

[html] Bootstrap: adding gaps between divs

Examples related to html

Examples related to css

Examples related to twitter-bootstrap