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!

score 83 · Accepted Answer · answered May 21 '12 at 19:43

83

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:

<div class="row spacer">
   <div class="span4">...</div>
   <div class="span4">...</div>
   <div class="span4">...</div>
</div>

<div class="row spacer">
   <div class="span4">...</div>
   <div class="span4">...</div>
   <div class="span4">...</div>
</div>

answered May 21 '12 at 19:43

Andres I Perez

75,075
21
157
138

1

Perfect, thanks! Adding it as an additional class to the row saves me lots of code too. – Adam May 21 '12 at 20:46

score 11 · Answer 2 · edited Jul 12 '19 at 11:37

11

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/

edited Jul 12 '19 at 11:37

AndrewRMillar

608
1
7
17

answered Nov 20 '15 at 10:34

Marek Naskret

401
3
5

1

these shorthand classes look very useful but never compile for me. Is there something i need to to to activate them? – v3nt Nov 08 '16 at 16:31
3

In the newest revision of bootstrap (v4-dev branch) they changed names respectively to `mt-1` ... `mt-5` (margin-top) and for padding `pt-1`, `pt-2` to `pt-5` etc. So there are 5 spacing levels now instead of 3. You can also use it in a responsive way now e.g. `mb-lg-5` for largest bottom margin of an element, `pb-md-3`, `ml-sm-4` etc. – Marek Naskret Nov 17 '16 at 11:13
1

thanks Marek. Neither seem to work though ;-/ With this site i'm using '4.0.0-alpha.4'. Do you know what mixin or function i need or where it is? I've checked .5 and the relevant scss files seems the same – v3nt Nov 17 '16 at 13:13

score 3 · Answer 3 · answered Feb 04 '17 at 03:16

3

My approach. Tricky, but works well for me

<p>&nbsp;</p>

answered Feb 04 '17 at 03:16

Alex Antonov

14,134
7
65
142

3

This is an impressively complex, technical, and jargon laden answer! – Matthew Apr 28 '17 at 17:55
jar·gon, The specialized language of a trade, profession, or similar group, especially when viewed as difficult to understand by outsiders. Never heard of it before, thanks. Anyway, it does the trick. Not tricky but dirty. – Nrzonline Sep 11 '17 at 16:35

Adding a simple spacer to twitter bootstrap

3 Answers3