Add a class of helpers for vertical spacing between elements?

[mg1075]

When using the grid 960 system, and then moving to bootstrap's system, I've found it very handy to have a set of .css classes to draw from for adjusting the vertical spacing between elements and/or filling empty grid elements. Perhaps you could consider adding a similar set to bootstrap? I hope what I'm trying to convey makes sense. There certainly could be mis-uses of the spacer "helpers", but I think on the whole, they would be of benefit as an additional scaffolding feature.

HTML

<div class="row">
   <div class="span4">
       <!-- empty has no content per se, but using spacer to prevent collapse -->
       <div class="spacer10"></div>
   </div>
   <div class="span4">
      <p>Some text...</p>
   </div>
   <div class="span4">
       <p>Some text...</p>
    </div>
</div>

<!-- Need a big space between the previous row and the next one, so use one of the bigger spacers -->

<div class="spacer30"></div>

<div class="row">
   <div class="span4">
       <!-- empty, but using spacer to prevent collapse -->
       <div class="spacer10"></div>
   </div>
   <div class="span4">
      <p>Some text...</p>
   </div>
   <div class="span4">
       <p>Some text...</p>
    </div>
</div>

CSS

.spacer5 { height: 5px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer10 { height: 10px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer15 { height: 15px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer20 { height: 20px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer25 { height: 25px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer30 { height: 30px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer35 { height: 35px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer40 { height: 40px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer45 { height: 45px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer50 { height: 50px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer100 { height: 100px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer200 { height: 200px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }

[brianfeister]

👍 +1 for this, thought I would add that it needs to be responsive.

I have wished for this in most all of my projects. Essentially, Bootstrap give us this great modular architecture like http://smacss.com talks about, so I don't want to have to go in and get specific about spacing, particularly because these spacers would need to be "responsive aware". So they should probably pivot on the LESS variable for @baseLineHeight. This way I don't need to start naming pieces of the page according to their content, but rather can keep everything scalable and modular and then if I tweak my font-size and line-height variables I don't have to worry about going in and adjusting all the .spacerX classes.

[mdo]

If you need a column to not be collapsed, add a min-height to them. We may implement this in the future.

[mg1075]

Making a column not be collapsed is just one of the possible uses.
Where these spacers really become useful is when you want a certain vertical
distance between elements of the page.

[ghost]

I'd like to see this added as well. It'll help with situations where the first element is a fixed-position toolbar -- at the moment this obviously entails that the second element will be pushed up and hidden behind the first element. To get around this I have to add a couple of empty <div class="row">s, which isn't ideal.

Perhaps, in addition to spacers, there could be vertical offsets to compliment the horizontal offsets.

[mg1075]

@MichaelRushton - While these would be nice to have in bootstrap, they also are handy to use even outside of bootstrap. Or at least I find them so.

https://github.com/mg1075/CssBuildingBlocks
http://nuget.org/packages/CssBuildingBlocks/1.0.4

[s10wen]

Wondering if this is the same solution I'm looking for:
http://codepen.io/simonowendesign/pen/folra

Setting a fixed margin / min-height isn't going to work responsive, unless you add different values for every breakpoint. Wondering if there's a better solution?

[jamosonic]

We tried spacing classes based on REMS. It works, but has many caveats. We found we only need to adjust our grid gutters on mobile (desktop and tabletish viewports share the same gutters) so we only needed two sets of prefixed surgical classes. .m-spacer and .spacer. Not sure if it helps, but food for thought.

[ivansammartino]

This is just what I was wondering too: some helper classes to space elements vertically!
Consider the following images (taken from an iPhone emulator), the form has class="form-inline" so that form elements are "all-in-a-row" in a desktop environment: in the first, elements are collapsed; in the second spaced elements seem more elegant to me

[raghav-axero]

@MichaelRushton @mg1075 I was just curious to know whether this "spacer" solution has been added in core of Bootstrap or not?

[ase69s]

Another one interested in "spacer" functionality in Bootstrap

[mjbaldwin]

+1

To me, one of the main ideas of Bootstrap is that you create basic pages (like for an admin interface) without any custom CSS at all.

The only thing that seems to be lacking for that is a set of vertical spacing classes. It seems to really make sense to me.

[shackrock]

Ditto. Would like to stay informed on this.

[alvarotrigo]

+1 here too. This is something very common in blog template designing, for example.

[norachuga]

I agree with @mjbaldwin, please consider this.

[friscoMad]

+1 Vertical spacing is a must for a grid system like this.

[sjlynch]

+1 It is really necessary for anything but the most basic websites.

[flynet70]

+1

[carasmo]

This is what I do for that and other situations, one reset file with just a few tweaks.

@media (max-width:@screen-xs-max) {
    .row > [class*="col-"] {
        margin-bottom:3%;
  }

  form .row > [class*="col-"] {
        margin-bottom:2%;
  }

  .form-group {margin-bottom:1%!important;}

  .form-inline .form-control  {margin-bottom:2%;}

}

[magicode]

+1

[ruifortes]

+1

[ghost]

one of the main ideas of Bootstrap is that you create basic pages...+1 Vertical spacing is a must for a grid system like this.

[visoom]

+1

[WilliamDenniss]

+1

[GesJeremie]

+1

[mjbaldwin]

@mdo -- this issue already has 17 (by my count) people asking for this funcionality. Any chance of it ever coming up? Or at least re-opening the issue to keep track of it?

[mdo]

@mjbaldwin Having a more flexible vertical rhythm would be great, but it has to be implemented without compromising simplicity or approachability. Right now the system isn't as flexible as it likely could, but it's consistent and easy enough to change.

I won't be opening this particular issue, but I'm always open to new ideas.

[WilliamDenniss]

Being able to lay out content vertically in a responsive way would be extremely useful. This use-case comes up a lot in my projects.

[carasmo]

For stuff like this I would just roll your own:

hr.spacer-10 {
  border: 0;
  clear: both;
  margin:0 0 10px;
}

use

<hr class="spacer-10 visible-xs">

Actually, I don't need it I adjust for mobile with a little tiny max-width since it's less crufty than adding spacers.

@media (max-width: 47.938em) {
  /*---------------------------[ ### adjust margins here and there ]---------------------------*/
  form .row > [class*="col-"] {
    margin-bottom: 2%;
  }
  .form-group {
    margin-bottom: 1%!important;
  }
  .form-inline .form-control,
  .form-inline .input-group .form-control {
    margin-bottom: 2%;
  }
  .form-inline .input-group .form-control {
    margin-bottom: 0;
  }
  .xs-break {
    display: block; /*display:none on min-width*/
  }
}

[jpesce]

+1

[danlewis]

+1

[deviprsd]

+1

[andy-polhill]

+1

[BertrandLF]

+1

[mtompkins]

+1

[cd21h]

+1

[yarsh]

+1 for some sort of control over vertical rythem

[cvrebert]

This has been added to our internal planning document for possible consideration for Bootstrap v4.

There is no point in posting further comments on this issue.

[nicholasbieber]

Hooray! The conversation's at an end! We can afford to be belligerent!
What happened to inline styling?

<div style="height:50px;"></div>

I might have a floppy disk with a few 1x1px gifs if anyone wants one.

[nicodegunst]

+1