Bootstrap: how to add vertical offset in columns?

Question

Bootstrap provides a class col-sm-offset-* to add spaces between columns. It is working fine on laptop screen but when we change screen resolution to mobile it displays columns arranged one below another without space.

Is there any class in bootstrap lib using which we can achieve expected result.

Refer fiddle

Current output,

Expected result,

Answer 1

You can add extra class (any name) to that particular div and use given css to it.

.custom{
  margin-bottom:10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavender;">col-1</div>
  <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavenderblush;">col-2</div>
  <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavender;">col-3</div>
  <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavenderblush;">col-4</div>
</div>
</div>

Answer 2

A little late but a while ago i came across this:

https://gist.github.com/erobert17/9139147

which has a sass styles for vertical offsets:

@for $i from 0 through 12 {
  .vert-offset-top-#{$i} {
    margin-top: #{$i}em;
  }

  .vert-offset-bottom-#{$i} {
    margin-bottom: #{$i}em;
  }
}

It has worked pretty well for me:)

Answer 3

try like this

.col-sm-offset-1{
    margin-top: 1em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-sm-2 col-sm-offset-1" style="background-color:lavender;">col-1</div>
  <div class="col-sm-2 col-sm-offset-1" style="background-color:lavenderblush;">col-2</div>
  <div class="col-sm-2 col-sm-offset-1" style="background-color:lavender;">col-3</div>
  <div class="col-sm-2 col-sm-offset-1" style="background-color:lavenderblush;">col-4</div>
</div>
</div>