Skip to content

Instantly share code, notes, and snippets.

@ohryan
Last active April 30, 2019 17:27
Show Gist options
  • Save ohryan/b9593841c024c033783d to your computer and use it in GitHub Desktop.
Save ohryan/b9593841c024c033783d to your computer and use it in GitHub Desktop.
Bootstrap 3 Responsive Text Align
.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
.text-xs-justify { text-align: justify; }
@media (min-width: @screen-sm-min) {
.text-sm-left { text-align: left; }
.text-sm-right { text-align: right; }
.text-sm-center { text-align: center; }
.text-sm-justify { text-align: justify; }
}
@media (min-width: @screen-md-min) {
.text-md-left { text-align: left; }
.text-md-right { text-align: right; }
.text-md-center { text-align: center; }
.text-md-justify { text-align: justify; }
}
@media (min-width: @screen-lg-min) {
.text-lg-left { text-align: left; }
.text-lg-right { text-align: right; }
.text-lg-center { text-align: center; }
.text-lg-justify { text-align: justify; }
}
// For SASS
// .text-xs-left { text-align: left; }
// .text-xs-right { text-align: right; }
// .text-xs-center { text-align: center; }
// .text-xs-justify { text-align: justify; }
// @media (min-width: $screen-sm-min) {
// .text-sm-left { text-align: left; }
// .text-sm-right { text-align: right; }
// .text-sm-center { text-align: center; }
// .text-sm-justify { text-align: justify; }
// }
// @media (min-width: $screen-md-min) {
// .text-md-left { text-align: left; }
// .text-md-right { text-align: right; }
// .text-md-center { text-align: center; }
// .text-md-justify { text-align: justify; }
// }
//@media (min-width: $screen-lg-min) {
// .text-lg-left { text-align: left; }
// .text-lg-right { text-align: right; }
// .text-lg-center { text-align: center; }
// .text-lg-justify { text-align: justify; }
//}
@omer-jan
Copy link

please tell us steps how to use it

@aldi
Copy link

aldi commented Jul 20, 2018

@omer-jan You just paste the styles in your CSS and then assign the classes to your elements. Simple as that.

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