Bootstrap: how to add vertical offset in columns?

Question

Bootstrap provides the col-sm-offset-* to add spaces between columns. It works great on a laptop screen, but when we change the screen resolution to mobile, it displays columns arranged one below the other without spaces.

Is there any class in bootstrap lib that can achieve the expected result.

Pay attention to the violin

Current output

Expected Result,

Answer 1

You can add an extra class (any name) to this particular div and use the given css for 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 some time ago I came across this:

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

which has 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 worked very well for me :)

Answer 3

try it

 .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>