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

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

<div class="container">
  <div class="col-md-3 col-xs-12">
   <div class="events">
     <img src="..."  class="img-responsive" alt="...."/>
     <div class="figcaption">
       <h2>Event Title</h2>
       <p>Event Description.</p>
     </div>
   </div>
  </div>
  <div class="col-md-3 col-xs-12">
   <div class="events">
    <img src="..."  class="img-responsive" alt="...."/>
    <div class="figcaption">
     <h2>Event Title</h2>
     <p>Event Description. </p>
    </div>
   </div>
  </div>
  <div class="col-md-3 col-xs-12">
   <div class="events">
    <img src="..."  class="img-responsive" alt="...."/>
    <div class="figcaption">
     <h2>Event Title</h2>
     <p>Event Description. </p>
    </div>
   </div>
  </div>
</div>

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

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

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

Starting from Bootstrap v4 you can simply add the following to your div class attribute  mt-2  margin top 2    lt div class  mt-2 col-md-12  gt          This will have a two-point top margin   lt  div gt    More examples are given in the docs  Bootstrap v4 docs

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

[html] Bootstrap: adding gaps between divs

Examples related to html

Examples related to css

Examples related to twitter-bootstrap