Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Adds a vertical offset top and bottom to Bootstrap 3 to be used within columns. Currently no vertical offset is available as standard in Bootstrap 3.
/*
Include this after bootstrap.css. Add class of
vert-offset-top-value or vert-offset-bottom-value
to your Bootstrap 3 default rows to prevent row content
from touching the row content above or below.
*/
/* Vertical Offset Bottom */
.vert-offset-top-12{
margin-top: 12em;
}
.vert-offset-top-11{
margin-top: 11em;
}
.vert-offset-top-10{
margin-top: 10em;
}
.vert-offset-top-9{
margin-top: 9em;
}
.vert-offset-top-8{
margin-top: 8em;
}
.vert-offset-top-7 {
margin-top: 7em;
}
.vert-offset-top-6{
margin-top: 6em;
}
.vert-offset-top-5{
margin-top: 5em;
}
.vert-offset-top-4{
margin-top: 4em;
}
.vert-offset-top-3{
margin-top: 3em;
}
.vert-offset-top-2{
margin-top: 2em;
}
.vert-offset-top-1{
margin-top: 1em;
}
.vert-offset-top-0{
margin-top: 0em;
}
/* Vertical Offset Bottom */
.vert-offset-bottom-12{
margin-bottom: 12em;
}
.vert-offset-bottom-11{
margin-bottom: 11em;
}
.vert-offset-bottom-10{
margin-bottom: 10em;
}
.vert-offset-bottom-9{
margin-bottom: 9em;
}
.vert-offset-bottom-8{
margin-bottom: 8em;
}
.vert-offset-bottom-7{
margin-bottom: 7em;
}
.vert-offset-bottom-6{
margin-bottom: 6em;
}
.vert-offset-bottom-5{
margin-bottom: 5em;
}
.vert-offset-bottom-4{
margin-bottom: 4em;
}
.vert-offset-bottom-3{
margin-bottom: 3em;
}
.vert-offset-bottom-2{
margin-bottom: 2em;
}
.vert-offset-bottom-1{
margin-bottom: 1em;
}
.vert-offset-bottom-0{
margin-bottom: 0em;
}
@kushal555

This comment has been minimized.

Copy link

@kushal555 kushal555 commented Apr 20, 2015

thank you very much

@akazakou

This comment has been minimized.

Copy link

@akazakou akazakou commented May 23, 2015

thanks for work!

@imcmjha

This comment has been minimized.

Copy link

@imcmjha imcmjha commented Jan 30, 2016

thanx

@leogout

This comment has been minimized.

Copy link

@leogout leogout commented Feb 11, 2016

Thank you for that ! This is the scss vrsion :

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

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

This comment has been minimized.

Copy link

@Fouzyyyy Fouzyyyy commented Feb 14, 2016

erobert17 you should edit your comment at the line 8,it's ''/* Vertical Offset Top /'' not ''/ Vertical Offset Bottom */'' :D thank's for this work anyway, it's so useful :)

@jp555soul

This comment has been minimized.

Copy link

@jp555soul jp555soul commented Mar 16, 2016

Thank you

@omarfwzii

This comment has been minimized.

Copy link

@omarfwzii omarfwzii commented Oct 25, 2016

thanks alot

@POOOPLO

This comment has been minimized.

Copy link

@POOOPLO POOOPLO commented Nov 2, 2016

Hi! I just signed up!!!!!!:)

@akroii

This comment has been minimized.

Copy link

@akroii akroii commented Sep 27, 2018

Thanks a lot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment