Skip to content

Instantly share code, notes, and snippets.

@erobert17
Last active May 2, 2022 18:36
Show Gist options
  • Save erobert17/9139147 to your computer and use it in GitHub Desktop.
Save erobert17/9139147 to your computer and use it in GitHub Desktop.
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;
}
@akazakou
Copy link

thanks for work!

@imcmjha
Copy link

imcmjha commented Jan 30, 2016

thanx

@leogout
Copy link

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
Copy link

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
Copy link

Thank you

@omarfwzii
Copy link

thanks alot

@POOOPLO
Copy link

POOOPLO commented Nov 2, 2016

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

@akroii
Copy link

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