Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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; }
//}
@nirname
Copy link

nirname commented Apr 24, 2015

For static Bootstrap 3 css:

@media (min-width: 768px) { /*sm*/ }
@media (min-width: 992px) { /*md*/ }
@media (min-width: 1200px) { /*lg*/ }

@anovsiradj
Copy link

anovsiradj commented Jan 9, 2016

thank you.., 🍰

@Thomas101
Copy link

Thomas101 commented May 25, 2016

Would it be worth adding the max widths to xs, sm and md so that they act more like the hidden-* classes?

@media (max-width: @screen-xs-max) {
    .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) and (max-width: @screen-sm-max) {
    .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)  and (max-width: @screen-md-max) {
    .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; }
}

If you're using bootstrap defaults...

@media (max-width: 767px) { /* xs */ }
@media (min-width: 768px) and (max-width: 991px) { /* sm */ }
@media (min-width: 992px) and (max-width: 1199px) { /* md */ }
@media (min-width: 1200px) { /* lg */ }

@omer-jan
Copy link

omer-jan commented Aug 24, 2016

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