Skip to content

Instantly share code, notes, and snippets.

@luislobo14rap
Last active May 2, 2020 22:16
Show Gist options
  • Select an option

  • Save luislobo14rap/37e6143e89b6ff60e8ba69cd418112a7 to your computer and use it in GitHub Desktop.

Select an option

Save luislobo14rap/37e6143e89b6ff60e8ba69cd418112a7 to your computer and use it in GitHub Desktop.
/* bs4-offset.css v1.0.2 */
.offset-x-0 {
margin-left: 0%;
margin-right: 0%;
}
.offset-x-1 {
margin-left: 8.33333333%;
margin-right: 8.33333333%;
}
.offset-x-2 {
margin-left: 16.66666667%;
margin-right: 16.66666667%;
}
.offset-x-3 {
margin-left: 25%;
margin-right: 25%;
}
.offset-x-4 {
margin-left: 33.33333333%;
margin-right: 33.33333333%;
}
.offset-x-5 {
margin-left: 41.66666667%;
margin-right: 41.66666667%;
}
@media (min-width: 576px) {
.offset-sm-x-0 {
margin-left: 0%;
margin-right: 0%;
}
.offset-sm-x-1 {
margin-left: 8.33333333%;
margin-right: 8.33333333%;
}
.offset-sm-x-2 {
margin-left: 16.66666667%;
margin-right: 16.66666667%;
}
.offset-sm-x-3 {
margin-left: 25%;
margin-right: 25%;
}
.offset-sm-x-4 {
margin-left: 33.33333333%;
margin-right: 33.33333333%;
}
.offset-sm-x-5 {
margin-left: 41.66666667%;
margin-right: 41.66666667%;
}
}
@media (min-width: 768px) {
.offset-md-x-0 {
margin-left: 0%;
margin-right: 0%;
}
.offset-md-x-1 {
margin-left: 8.33333333%;
margin-right: 8.33333333%;
}
.offset-md-x-2 {
margin-left: 16.66666667%;
margin-right: 16.66666667%;
}
.offset-md-x-3 {
margin-left: 25%;
margin-right: 25%;
}
.offset-md-x-4 {
margin-left: 33.33333333%;
margin-right: 33.33333333%;
}
.offset-md-x-5 {
margin-left: 41.66666667%;
margin-right: 41.66666667%;
}
}
@media (min-width: 992px) {
.offset-lg-x-0 {
margin-left: 0%;
margin-right: 0%;
}
.offset-lg-x-1 {
margin-left: 8.33333333%;
margin-right: 8.33333333%;
}
.offset-lg-x-2 {
margin-left: 16.66666667%;
margin-right: 16.66666667%;
}
.offset-lg-x-3 {
margin-left: 25%;
margin-right: 25%;
}
.offset-lg-x-4 {
margin-left: 33.33333333%;
margin-right: 33.33333333%;
}
.offset-lg-x-5 {
margin-left: 41.66666667%;
margin-right: 41.66666667%;
}
}
@media (min-width: 1200px) {
.offset-xl-x-0 {
margin-left: 0%;
margin-right: 0%;
}
.offset-xl-x-1 {
margin-left: 8.33333333%;
margin-right: 8.33333333%;
}
.offset-xl-x-2 {
margin-left: 16.66666667%;
margin-right: 16.66666667%;
}
.offset-xl-x-3 {
margin-left: 25%;
margin-right: 25%;
}
.offset-xl-x-4 {
margin-left: 33.33333333%;
margin-right: 33.33333333%;
}
.offset-xl-x-5 {
margin-left: 41.66666667%;
margin-right: 41.66666667%;
}
}
.offset-l-0 {
margin-left: 0%;
}
.offset-l-1 {
margin-left: 8.33333333%;
}
.offset-l-2 {
margin-left: 16.66666667%;
}
.offset-l-3 {
margin-left: 25%;
}
.offset-l-4 {
margin-left: 33.33333333%;
}
.offset-l-5 {
margin-left: 41.66666667%;
}
.offset-l-6 {
margin-left: 50%;
}
.offset-l-7 {
margin-left: 58.33333333%;
}
.offset-l-8 {
margin-left: 66.66666667%;
}
.offset-l-9 {
margin-left: 75%;
}
.offset-l-10 {
margin-left: 83.33333333%;
}
.offset-l-11 {
margin-left: 91.66666667%;
}
@media (min-width: 576px) {
.offset-sm-l-0 {
margin-left: 0%;
}
.offset-sm-l-1 {
margin-left: 8.33333333%;
}
.offset-sm-l-2 {
margin-left: 16.66666667%;
}
.offset-sm-l-3 {
margin-left: 25%;
}
.offset-sm-l-4 {
margin-left: 33.33333333%;
}
.offset-sm-l-5 {
margin-left: 41.66666667%;
}
.offset-sm-l-6 {
margin-left: 50%;
}
.offset-sm-l-7 {
margin-left: 58.33333333%;
}
.offset-sm-l-8 {
margin-left: 66.66666667%;
}
.offset-sm-l-9 {
margin-left: 75%;
}
.offset-sm-l-10 {
margin-left: 83.33333333%;
}
.offset-sm-l-11 {
margin-left: 91.66666667%;
}
}
@media (min-width: 768px) {
.offset-md-l-0 {
margin-left: 0%;
}
.offset-md-l-1 {
margin-left: 8.33333333%;
}
.offset-md-l-2 {
margin-left: 16.66666667%;
}
.offset-md-l-3 {
margin-left: 25%;
}
.offset-md-l-4 {
margin-left: 33.33333333%;
}
.offset-md-l-5 {
margin-left: 41.66666667%;
}
.offset-md-l-6 {
margin-left: 50%;
}
.offset-md-l-7 {
margin-left: 58.33333333%;
}
.offset-md-l-8 {
margin-left: 66.66666667%;
}
.offset-md-l-9 {
margin-left: 75%;
}
.offset-md-l-10 {
margin-left: 83.33333333%;
}
.offset-md-l-11 {
margin-left: 91.66666667%;
}
}
@media (min-width: 992px) {
.offset-lg-l-0 {
margin-left: 0%;
}
.offset-lg-l-1 {
margin-left: 8.33333333%;
}
.offset-lg-l-2 {
margin-left: 16.66666667%;
}
.offset-lg-l-3 {
margin-left: 25%;
}
.offset-lg-l-4 {
margin-left: 33.33333333%;
}
.offset-lg-l-5 {
margin-left: 41.66666667%;
}
.offset-lg-l-6 {
margin-left: 50%;
}
.offset-lg-l-7 {
margin-left: 58.33333333%;
}
.offset-lg-l-8 {
margin-left: 66.66666667%;
}
.offset-lg-l-9 {
margin-left: 75%;
}
.offset-lg-l-10 {
margin-left: 83.33333333%;
}
.offset-lg-l-11 {
margin-left: 91.66666667%;
}
}
@media (min-width: 1200px) {
.offset-xl-l-0 {
margin-left: 0%;
}
.offset-xl-l-1 {
margin-left: 8.33333333%;
}
.offset-xl-l-2 {
margin-left: 16.66666667%;
}
.offset-xl-l-3 {
margin-left: 25%;
}
.offset-xl-l-4 {
margin-left: 33.33333333%;
}
.offset-xl-l-5 {
margin-left: 41.66666667%;
}
.offset-xl-l-6 {
margin-left: 50%;
}
.offset-xl-l-7 {
margin-left: 58.33333333%;
}
.offset-xl-l-8 {
margin-left: 66.66666667%;
}
.offset-xl-l-9 {
margin-left: 75%;
}
.offset-xl-l-10 {
margin-left: 83.33333333%;
}
.offset-xl-l-11 {
margin-left: 91.66666667%;
}
}
.offset-r-0 {
margin-right: 0%;
}
.offset-r-1 {
margin-right: 8.33333333%;
}
.offset-r-2 {
margin-right: 16.66666667%;
}
.offset-r-3 {
margin-right: 25%;
}
.offset-r-4 {
margin-right: 33.33333333%;
}
.offset-r-5 {
margin-right: 41.66666667%;
}
.offset-r-6 {
margin-right: 50%;
}
.offset-r-7 {
margin-right: 58.33333333%;
}
.offset-r-8 {
margin-right: 66.66666667%;
}
.offset-r-9 {
margin-right: 75%;
}
.offset-r-10 {
margin-right: 83.33333333%;
}
.offset-r-11 {
margin-right: 91.66666667%;
}
@media (min-width: 576px) {
.offset-sm-r-0 {
margin-right: 0%;
}
.offset-sm-r-1 {
margin-right: 8.33333333%;
}
.offset-sm-r-2 {
margin-right: 16.66666667%;
}
.offset-sm-r-3 {
margin-right: 25%;
}
.offset-sm-r-4 {
margin-right: 33.33333333%;
}
.offset-sm-r-5 {
margin-right: 41.66666667%;
}
.offset-sm-r-6 {
margin-right: 50%;
}
.offset-sm-r-7 {
margin-right: 58.33333333%;
}
.offset-sm-r-8 {
margin-right: 66.66666667%;
}
.offset-sm-r-9 {
margin-right: 75%;
}
.offset-sm-r-10 {
margin-right: 83.33333333%;
}
.offset-sm-r-11 {
margin-right: 91.66666667%;
}
}
@media (min-width: 768px) {
.offset-md-r-0 {
margin-right: 0%;
}
.offset-md-r-1 {
margin-right: 8.33333333%;
}
.offset-md-r-2 {
margin-right: 16.66666667%;
}
.offset-md-r-3 {
margin-right: 25%;
}
.offset-md-r-4 {
margin-right: 33.33333333%;
}
.offset-md-r-5 {
margin-right: 41.66666667%;
}
.offset-md-r-6 {
margin-right: 50%;
}
.offset-md-r-7 {
margin-right: 58.33333333%;
}
.offset-md-r-8 {
margin-right: 66.66666667%;
}
.offset-md-r-9 {
margin-right: 75%;
}
.offset-md-r-10 {
margin-right: 83.33333333%;
}
.offset-md-r-11 {
margin-right: 91.66666667%;
}
}
@media (min-width: 992px) {
.offset-lg-r-0 {
margin-right: 0%;
}
.offset-lg-r-1 {
margin-right: 8.33333333%;
}
.offset-lg-r-2 {
margin-right: 16.66666667%;
}
.offset-lg-r-3 {
margin-right: 25%;
}
.offset-lg-r-4 {
margin-right: 33.33333333%;
}
.offset-lg-r-5 {
margin-right: 41.66666667%;
}
.offset-lg-r-6 {
margin-right: 50%;
}
.offset-lg-r-7 {
margin-right: 58.33333333%;
}
.offset-lg-r-8 {
margin-right: 66.66666667%;
}
.offset-lg-r-9 {
margin-right: 75%;
}
.offset-lg-r-10 {
margin-right: 83.33333333%;
}
.offset-lg-r-11 {
margin-right: 91.66666667%;
}
}
@media (min-width: 1200px) {
.offset-xl-r-0 {
margin-right: 0%;
}
.offset-xl-r-1 {
margin-right: 8.33333333%;
}
.offset-xl-r-2 {
margin-right: 16.66666667%;
}
.offset-xl-r-3 {
margin-right: 25%;
}
.offset-xl-r-4 {
margin-right: 33.33333333%;
}
.offset-xl-r-5 {
margin-right: 41.66666667%;
}
.offset-xl-r-6 {
margin-right: 50%;
}
.offset-xl-r-7 {
margin-right: 58.33333333%;
}
.offset-xl-r-8 {
margin-right: 66.66666667%;
}
.offset-xl-r-9 {
margin-right: 75%;
}
.offset-xl-r-10 {
margin-right: 83.33333333%;
}
.offset-xl-r-11 {
margin-right: 91.66666667%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment