62

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?

dabadaba
  • 9,064
  • 21
  • 85
  • 155
  • Don't you just want to add a margin to `row`? Like `.row { margin-bottom: 40px; }`? – m59 Jan 02 '14 at 18:16
  • [`col-md-offset-N`](http://getbootstrap.com/css/#grid-offsetting)? – Jonathan Lonowski Jan 02 '14 at 18:17
  • @m59 Maybe, but not for every `.row` div... I don't want to mess with the Bootstrap CSS properties and change them. @Jonathan Lonowski isn't that for horizontal positioning? – dabadaba Jan 02 '14 at 18:18
  • @dabadaba then add your own class to the rows you want to change, like `.spaced-row` and add the margin to that. – m59 Jan 02 '14 at 18:18
  • 1
    @dabadaba You didn't really specify "*vertically*." Just a "*gap between divs*" after mentioning both row and column divs, suggesting you could want either or both vertical and horizontal spacing. But, yes, `offset` classes will only help with horizontal. – Jonathan Lonowski Jan 02 '14 at 18:25

5 Answers5

62

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

MAXE
  • 4,978
  • 2
  • 45
  • 61
tonysepia
  • 3,340
  • 3
  • 27
  • 45
54

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.

Ali Gajani
  • 14,762
  • 12
  • 59
  • 100
  • That's what I am looking for, something that Bootstrap already gives you to do that. But as far as I know offset only helps to position divs horizontally, not vertically, and I want to create the gap between divs placed below another. – dabadaba Jan 02 '14 at 18:21
  • Ok, thanks for your response, that's how I'll do it. – dabadaba Jan 02 '14 at 18:25
  • what if I have 4 divs having class .col-md-4 in a row and I want to add space after first 3? – Syed Haziq Hamdani Mar 28 '17 at 11:59
23

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>

Kopernikus
  • 247
  • 2
  • 3
  • That works. But convention of a good developer is to keep the assets separately. It is best to define a class or reference to your div id in a separate css file. Trust me when I say this, in webdesign, singletons are rare ! – thethakuri Apr 14 '16 at 05:35
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
John Nyingi
  • 951
  • 1
  • 16
  • 36
1

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.

Laurent Doda
  • 101
  • 1
  • 6