Skip to content

Instantly share code, notes, and snippets.

@gorobey
Forked from nathanpitman/gist:4038248
Last active July 15, 2017 18:51
Show Gist options
  • Save gorobey/25a9d3cfc29a4900af8be57ec40227b9 to your computer and use it in GitHub Desktop.
Save gorobey/25a9d3cfc29a4900af8be57ec40227b9 to your computer and use it in GitHub Desktop.
Responsive 'insets' / 'negative offsets' for Twitter Bootstrap
.col-xs-inset-12 {
margin-left: -100%;
}
.col-xs-inset-11 {
margin-left: -91.66666667%;
}
.col-xs-inset-10 {
margin-left: -83.33333333%;
}
.col-xs-inset-9 {
margin-left: -75%;
}
.col-xs-inset-8 {
margin-left: -66.66666667%;
}
.col-xs-inset-7 {
margin-left: -58.33333333%;
}
.col-xs-inset-6 {
margin-left: -50%;
}
.col-xs-inset-5 {
margin-left: -41.66666667%;
}
.col-xs-inset-4 {
margin-left: -33.33333333%;
}
.col-xs-inset-3 {
margin-left: -25%;
}
.col-xs-inset-2 {
margin-left: -16.66666667%;
}
.col-xs-inset-1 {
margin-left: -8.33333333%;
}
.col-xs-inset-0 {
margin-left: -0;
}
@media (min-width: 768px) {
.col-sm-inset-12 {
margin-left: -100%;
}
.col-sm-inset-11 {
margin-left: -91.66666667%;
}
.col-sm-inset-10 {
margin-left: -83.33333333%;
}
.col-sm-inset-9 {
margin-left: -75%;
}
.col-sm-inset-8 {
margin-left: -66.66666667%;
}
.col-sm-inset-7 {
margin-left: -58.33333333%;
}
.col-sm-inset-6 {
margin-left: -50%;
}
.col-sm-inset-5 {
margin-left: -41.66666667%;
}
.col-sm-inset-4 {
margin-left: -33.33333333%;
}
.col-sm-inset-3 {
margin-left: -25%;
}
.col-sm-inset-2 {
margin-left: -16.66666667%;
}
.col-sm-inset-1 {
margin-left: -8.33333333%;
}
.col-sm-inset-0 {
margin-left: -0;
}
}
@media (min-width: 992px) {
.col-md-inset-12 {
margin-left: -100%;
}
.col-md-inset-11 {
margin-left: -91.66666667%;
}
.col-md-inset-10 {
margin-left: -83.33333333%;
}
.col-md-inset-9 {
margin-left: -75%;
}
.col-md-inset-8 {
margin-left: -66.66666667%;
}
.col-md-inset-7 {
margin-left: -58.33333333%;
}
.col-md-inset-6 {
margin-left: -50%;
}
.col-md-inset-5 {
margin-left: -41.66666667%;
}
.col-md-inset-4 {
margin-left: -33.33333333%;
}
.col-md-inset-3 {
margin-left: -25%;
}
.col-md-inset-2 {
margin-left: -16.66666667%;
}
.col-md-inset-1 {
margin-left: -8.33333333%;
}
.col-md-inset-0 {
margin-left: -0;
}
}
@media (min-width: 1200px) {
.col-lg-inset-12 {
margin-left: -100%;
}
.col-lg-inset-11 {
margin-left: -91.66666667%;
}
.col-lg-inset-10 {
margin-left: -83.33333333%;
}
.col-lg-inset-9 {
margin-left: -75%;
}
.col-lg-inset-8 {
margin-left: -66.66666667%;
}
.col-lg-inset-7 {
margin-left: -58.33333333%;
}
.col-lg-inset-6 {
margin-left: -50%;
}
.col-lg-inset-5 {
margin-left: -41.66666667%;
}
.col-lg-inset-4 {
margin-left: -33.33333333%;
}
.col-lg-inset-3 {
margin-left: -25%;
}
.col-lg-inset-2 {
margin-left: -16.66666667%;
}
.col-lg-inset-1 {
margin-left: -8.33333333%;
}
.col-lg-inset-0 {
margin-left: -0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment