Add vertical whitespace using Twitter Bootstrap

Question

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

User · Answer

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>

User · Answer

My trick  Not elegant  but it works    lt p gt  amp nbsp  lt  p gt

User · Answer

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

User · Answer

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  lt div class  control-group  gt  around a button

User · Answer

Sorry to dig an old grave here  but why not just do this    lt div class  form-group  gt       amp nbsp   lt  div gt    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     lt div class  spacer  gt  lt  div gt

User · Answer

I tried using  lt div class  control-group  gt  and it did not change my layout  It did not add vertical space  The solution that worked for me was    lt ol style  visibility hidden   gt  lt  ol gt    If that doesn t give you enough vertical space  you can incrementally get more by adding nested  lt li gt  amp nbsp  lt  li gt  tags

User · Answer

In Bootstrap 4 there are spacing utilites   Citing the documentation for used notation      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          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   r - for classes that set margin-right or padding-right   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

User · Answer

lt form gt    lt fieldset class  form-group  gt  lt input type  text  class  form-control  placeholder  Input   gt  lt  fieldset gt    lt fieldset class  form-group  gt  lt button class  btn btn-primary   gt Button lt  fieldset gt   lt  form gt    http   v4-alpha getbootstrap com components forms  form-controls

User · Answer

There is nothing more DRY than    btn       margin-bottom 5px

User · Answer

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    lt div class  help-block  gt  lt  div gt

User · Answer

Wrapping works but when you just want a space  I like    lt div class  col-xs-12  style  height 50px   gt  lt  div gt

User · Answer

Just use  lt br  gt   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

User · Answer

I merely created a div class using various heights i e    lt div class  divider-10  gt  lt  div gt    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

[twitter-bootstrap] Add vertical whitespace using Twitter Bootstrap?

Examples related to twitter-bootstrap

Examples related to whitespace

Examples related to vertical-alignment

Examples related to twitter-bootstrap-2