Skip to content

Instantly share code, notes, and snippets.

@roylory
Last active August 29, 2015 14:12
Show Gist options
  • Save roylory/78e862077d7aaa116e48 to your computer and use it in GitHub Desktop.
Save roylory/78e862077d7aaa116e48 to your computer and use it in GitHub Desktop.
Responsive text-align and Responsive float
//========================================================================
// Responsive text-align (https://github.com/twbs/bootstrap/issues/11292)
// and Responsive float
//========================================================================
.text-left-not-xs, .text-left-not-sm, .text-left-not-md, .text-left-not-lg {
text-align: left;
}
.text-center-not-xs, .text-center-not-sm, .text-center-not-md, .text-center-not-lg {
text-align: center;
}
.text-right-not-xs, .text-right-not-sm, .text-right-not-md, .text-right-not-lg {
text-align: right;
}
.text-justify-not-xs, .text-justify-not-sm, .text-justify-not-md, .text-justify-not-lg {
text-align: justify;
}
.pull-left-not-xs, .pull-left-not-sm, .pull-left-not-md, .pull-left-not-lg {
float: left;
}
.pull-right-not-xs, .pull-right-not-sm, .pull-right-not-md, .pull-right-not-lg {
float: right;
}
@media (max-width: 767px) {
.text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs {
text-align: inherit;
}
.text-left-xs {
text-align: left;
}
.text-center-xs {
text-align: center;
}
.text-right-xs {
text-align: right;
}
.text-justify-xs {
text-align: justify;
}
.pull-left-not-xs, .pull-right-not-xs {
float: inherit;
}
.pull-left-xs {
float: left;
}
.pull-right-xs {
float: right;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm {
text-align: inherit;
}
.text-left-sm {
text-align: left;
}
.text-center-sm {
text-align: center;
}
.text-right-sm {
text-align: right;
}
.text-justify-sm {
text-align: justify;
}
.pull-left-not-sm, .pull-right-not-sm {
float: inherit;
}
.pull-left-sm {
float: left;
}
.pull-right-sm {
float: right;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md {
text-align: inherit;
}
.text-left-md {
text-align: left;
}
.text-center-md {
text-align: center;
}
.text-right-md {
text-align: right;
}
.text-justify-md {
text-align: justify;
}
.pull-left-not-md, .pull-right-not-md {
float: inherit;
}
.pull-left-md {
float: left;
}
.pull-right-md {
float: right;
}
}
@media (min-width: 1200px) {
.text-left-not-lg, .text-center-not-lg, .text-right-not-lg, .text-justify-not-lg {
text-align: inherit;
}
.text-left-lg {
text-align: left;
}
.text-center-lg {
text-align: center;
}
.text-right-lg {
text-align: right;
}
.text-justify-lg {
text-align: justify;
}
.pull-left-not-lg, .pull-right-not-lg {
float: inherit;
}
.pull-left-lg {
float: left;
}
.pull-right-lg {
float: right;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment