168

What's the best way to add vertical whitespace using Twitter's Bootstrap?

For example, let's say that I am creating a landing page and would like a bit (100px) of blank whitespace above and below a certain button. Obviously, I could create a certain class for that particular button. But, I would think that Bootstrap should have a DRY way of adding in vertical blank spaces.

13 Answers 13

52

In v2, there isn't anything built-in for that much vertical space, so you'll want to stick with a custom class. For smaller heights, I usually just throw a <div class="control-group"> around a button.

12
  • 9
    or <div class="btn-toolbar">
    – dyurkavets
    Commented Sep 5, 2012 at 10:31
  • 10
    Thanks. I now have created some spacer10, spacer50, etc classes for this use. I see there is a feature request in github for this already: bit.ly/R9oap9
    – Ryan
    Commented Sep 5, 2012 at 18:34
  • 1
    @Ryan: Nice, didn't see the pull request. I'm a little conflicted by it. Bootstrap is almost entirely presentational (and convenient), but if you squint hard enough to ignore all the extra HTML, you can derive semantics from it. Vertical spacing is purely presentational, so I think it's best done with a custom class/ID.
    – jmdeldin
    Commented Sep 6, 2012 at 23:34
  • 2
    This was for v2, but it seems like v3 has minimized the spacing around .btn-toolbar, so you should just add a new class with your own margins.
    – jmdeldin
    Commented May 8, 2014 at 21:24
  • 3
    Apparently the github feature request has been closed and the feature may make it in to Bootstrap v4. bit.ly/R9oap9
    – Ryan
    Commented Apr 16, 2015 at 21:57
51

Wrapping works but when you just want a space, I like:

<div class="col-xs-12" style="height:50px;"></div>
3
  • 16
    Adding an inline style when working with Bootstrap is generally not a good idea. It should at least go into CSS.
    – alexykot
    Commented Apr 2, 2016 at 21:59
  • 2
    notice that "col-xs-12" is exactly the same as having no classes at all Commented Jun 15, 2017 at 13:08
  • Not a good idea. "What's the best way to add vertical whitespace using Twitter's Bootstrap"... Instead defining custom classes would be better to avoid inline-styles.
    – Capuchin
    Commented Sep 24, 2020 at 7:27
44

In Bootstrap 4/5 there are spacing utilites (BS4, BS5).

Excerpt from the documentation:

Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of (please note differences in BS4 and BS5):

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left (Bootstrap 4)
  • s - for classes that set margin-left or padding-left (Bootstrap 5)
  • r - for classes that set margin-right or padding-right (Bootstrap 4)
  • e - for classes that set margin-right or padding-right (Bootstrap 5)
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 1 - (by default) for classes that set the margin or padding to $spacer * .25
  • 2 - (by default) for classes that set the margin or padding to $spacer * .5
  • 3 - (by default) for classes that set the margin or padding to $spacer
  • 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
  • 5 - (by default) for classes that set the margin or padding to $spacer * 3

So to have some extra vertical space above and below an element you would use my-5 class.

1
  • 4
    Could you give an example of a valid class string? Commented Nov 19, 2018 at 17:40
38

Sorry to dig an old grave here, but why not just do this?

<div class="form-group">
    &nbsp;
</div>

It will add a space the height of a normal form element.

It seems about 1 line on a form is roughly 50px (47px on my element I just inspected). This is a horizontal form, with label on left 2col and input on right 10col. So your pixels may vary.

Since mine is basically 50px, I would create a spacer of 50px tall with no margins or padding;

.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>
6
  • 1
    This adds space below group but not above
    – icc97
    Commented Jan 8, 2016 at 14:13
  • Of course it does, that's exactly what he asked for, a way to add a vertical blank space. If you need custom form-group or row or even a button, make your own class to add to it, overriding the margins. Ie: class="form-group spaced-group" and ".spaced-group { margin-top: 15px !important; margin-bottom: 15px !important; }. .. It's just common css-sense.
    – Wade
    Commented Jan 8, 2016 at 14:24
  • The OP specifically asked: "a bit (100px) of blank white space above and below a certain button"
    – icc97
    Commented Jan 8, 2016 at 18:50
  • 1
    No, that was an example, not his question. His question was "What's the best way to add vertical blank space using Twitter's Bootstrap?" - a vertical blank space is different than a margin on a specific element. If he was doing it for all buttons he could change the margin of btn or make his own class like "btn-spaced" with his desired margins. If he just wants a way to add a gap wherever he wants, a spacer of a fixed height like I answered is what he needs. He asked one question, and gave an example of another. I assumed he knew CSS enough to know he could override the margins.
    – Wade
    Commented Jan 8, 2016 at 22:31
  • Since he said a DRY method, and button, then I would create a button class with the margins I wanted: btn-spaced. If it wasn't for only buttons then a general margin that would apply to rows, form-groups, whatever. Like class="row space-small" or class="form-group space-medium".. Where small medium and large are just variants of the margins, and could be applied to virtually anything. - hard to tell which the op wants. For buttons only or just for any element..
    – Wade
    Commented Jan 8, 2016 at 22:44
24

I know this is old, but I came here searching for the same thing, I found that Bootstrap has the help-block, very handy for these situations:

<div class="help-block"></div>
0
21

For version 3 there doesn't appear to be "bootstrap" way to achieve this neatly.

A panel, a well and a form-group all provide some vertical spacing.

A more formal specific vertical spacing solution is, apparently, on the roadmap for bootstrap v4

https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550 https://github.com/twbs/bootstrap/issues/13532

1
  • 6
    .form-group seems the best choice as the css is limited to margin-bottom:15px. .well and .panel should not be used if you want simply add some spacing as they have other attributes (such as background, padding, border, etc)
    – xaa
    Commented Nov 25, 2015 at 8:28
9

I merely created a div class using various heights i.e.

<div class="divider-10"></div>

The CSS is:

.divider-10 {
    width:100%; 
    min-height:1px; 
    margin-top:10px; 
    margin-bottom:10px;  
    display:inline-block; 
    position:relative;
}

Just create a divider class for what ever heights are needed.

8

My trick. Not elegant, but it works:

<p>&nbsp;</p>
1
  • 2
    @JayKilleen +1 You should post that as an answer. Perhaps people are becoming to reliant on the frameworks and have begun forgetting the basics.
    – ADJenks
    Commented Aug 8, 2017 at 19:08
5

Just use <br/>. I found myself here looking for the answer to this question and then felt sort of silly for not thinking about using a simple line break as suggested by user JayKilleen in a comment.

2
  • Downside is you don't get exact 100px control, but it should certainly work to add a reasonable amount of space.
    – mix3d
    Commented Jan 31, 2018 at 13:33
  • 1
    @mix3d, you're right there, I didn't notice at first that he cared about it being exactly 100px. I thought he just wanted a "bit". He could definitely make his own helper class like everyone suggested. But since this post is so many years old, he could now just upgrade to bootstrap 4 for precise spacing, or take the helper classes from it.
    – ADJenks
    Commented Jan 31, 2018 at 18:54
5

I know this is old and there are several good solutions already posted, but a simple solution that worked for me is the following CSS

<style>
  .divider{
    margin: 0cm 0cm .5cm 0cm;
  }
</style>

and then create a div in your html

<div class="divider"></div>
4

I tried using <div class="control-group"> and it did not change my layout. It did not add vertical space. The solution that worked for me was:

<ol style="visibility:hidden;"></ol>

If that doesn't give you enough vertical space, you can incrementally get more by adding nested <li>&nbsp;</li> tags.

1
  • Thanks, and your suggestion would work with or without Bootstrap. But the question was specifically about using Twitter Bootstrap to add the spacing.
    – Jonathan
    Commented Apr 29, 2015 at 3:49
1
<form>
 <fieldset class="form-group"><input type="text" class="form-control" placeholder="Input"/></fieldset>
 <fieldset class="form-group"><button class="btn btn-primary"/>Button</fieldset>
</form>

http://v4-alpha.getbootstrap.com/components/forms/#form-controls

4
  • 1
    How is this an answer to the question?
    – Matt S
    Commented May 13, 2016 at 13:52
  • It adds vertical spacing as the original poster asked for, also bootstrap devs are now catering for it in the latest version (4) in beta state. It is actually the correct answer and if you google vertical spacing in bootstrap you would see it was not catered for previously. Please don't downvote stuff you have not tested or googled.
    – Denver
    Commented Jun 21, 2016 at 9:42
  • You clearly have not read the question. "I would like a bit (100px) of blank white space above and below a certain button." A certain button... a certain button...
    – Matt S
    Commented Jun 21, 2016 at 13:43
  • 1
    Before that he said: "For example, let's say". It was just an example, it wasn't the specific problem. Don't quote out of context. The example I provided is ample and all the info I gave is adequate.
    – Denver
    Commented Jun 24, 2016 at 9:42
-3

There is nothing more DRY than

.btn {
    margin-bottom:5px;
}
2
  • 13
    I'd recommend against modifying the styling of base bootstrap css classes. Commented Nov 8, 2014 at 0:47
  • 1
    @JamesPalawaga +1. But if this was to be a general standard across your application, you could override the bootstrap styling, using LESS and variables and/or carefully managed override stylesheets.
    – Jonathan
    Commented Apr 29, 2015 at 3:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.