Bootstrap: adding gaps between divs - html

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?

Answer 1

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

Answer 2

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.

Answer 3

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. <div style="margin-top:5px"></div>

Answer 4

The easiest way to do it is to add mb-5 to your classes. That is <div class='row mb-5'>.
NOTE:
mb varies betweeen 1 to 5
The Div MUST have the row class

Answer 5

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.