0

I've been using Bootstrap for the past couple of weeks, and I love the grid system and the interesting usage of HTML5 Data Attributes, but one thing I can't seem to get my head around is spacing.

I can create row one after another, or even just containers, and as much as their are evident gutters between each column (col-md-*), there is nothing vertically to space your content.

In my most recent project, I created some divider classes just to add some vertical margins in between some of my containers -- but this feels redundant.

How are you supposed to go about properly spacing your content?

Joshua
  • 648
  • 7
  • 18

1 Answers1

0

It seems, there are no special classes in Bootstrap for that. But I think, it's for good.

Bootstrap cannot always "know", how many space you will need. You must create it yourself. That's why you are a developer :)

Look at these solutions: Add vertical blank space using twitter bootstrap:

1) use bootstrap build-in class form-group

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

2) or add additional block after every row you need:

<div class="col-xs-12" style="height:50px;"></div>

3) or create a new class and add additional block after every row you need:

CSS:

.spacer { margin:0; padding:0; height:50px; }

HTML:

<div class="spacer"></div>

4) Or, if you really need space after every row element, add additional style for row class:

.row { padding-bottom: 50px }

Example: https://jsfiddle.net/3a36p06h/

Community
  • 1
  • 1
Arnis Juraga
  • 1,027
  • 14
  • 31