mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-16 10:34:07 +02:00
Code Issues Releases Wiki Activity

addresses #14217, add responsive text alignment classes

Browse Source
This commit is contained in:
Mark Otto
2015-08-10 22:46:43 -07:00
parent b814a96aba
commit d7f4985639
1 changed files with 33 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
scss/_utilities.scss
View File

@@ -55,6 +55,7 @@
// //
// Alignment // Alignment
.text-left { text-align: left; } .text-left { text-align: left; }
.text-right { text-align: right; } .text-right { text-align: right; }
.text-center { text-align: center; } .text-center { text-align: center; }
@@ -62,13 +63,44 @@
.text-nowrap { white-space: nowrap; } .text-nowrap { white-space: nowrap; }
.text-truncate { @include text-truncate; } .text-truncate { @include text-truncate; }
// Responsive alignment
.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
@include media-breakpoint-up(sm) {
.text-sm-left { text-align: left; }
.text-sm-right { text-align: right; }
.text-sm-center { text-align: center; }
}
@include media-breakpoint-up(md) {
.text-md-left { text-align: left; }
.text-md-right { text-align: right; }
.text-md-center { text-align: center; }
}
@include media-breakpoint-up(lg) {
.text-lg-left { text-align: left; }
.text-lg-right { text-align: right; }
.text-lg-center { text-align: center; }
}
@include media-breakpoint-up(xl) {
.text-xl-left { text-align: left; }
.text-xl-right { text-align: right; }
.text-xl-center { text-align: center; }
}
// Transformation // Transformation
.text-lowercase { text-transform: lowercase; } .text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; } .text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; } .text-capitalize { text-transform: capitalize; }
// Contextual colors // Contextual colors
.text-muted { .text-muted {
color: $text-muted; color: $text-muted;
} }