Menu
I'm using Bootstrap 3 for a blog. In my custom CSS, I recently added
body {
text-align: justify;
...
}
I like the result on bigger screens (tablet, desktop). But on small screens (phone), justified text doesn't work very due to the narrower columns plus my blog's occasional use of long-ish-technical-terms-like-this.
Can I responsively have text-align: justify only on bigger screens?
Is it possible to do so solely via CSS, or, would I need to write some custom JS to do so?
230
By adding the ” text-center” class of Bootstrap 3 We can use the “text-center” class of bootstrap 3 for the center-alignment of an element. So in our td when we add “text-center” class, and then our table text goes to the center.
Add class . text-center to the parent div to align text or any item inside to the center. You can also decide how the alignment should look like on the specific screen sizes.
Although the provided solution is absolutely right, I think there is a different approach that could be interesting. Bootstrap does not provide alignment classes that depend on window size, but you can define them:
.text-justify-xs {
text-align: justify;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.text-justify-sm {
text-align: justify;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.text-justify-md {
text-align: justify;
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.text-justify-lg {
text-align: justify;
}
}
Then, you could add this classes to your html elements:
<body class="text-justify-lg">
You can also create css rules for text-left-xx and text-right-xx.
137
For a more complete solution try this:
/*
* Responsive text aligning
* http://ohryan.ca/2014/08/14/set-responsive-text-alignment-bootstrap-3/
*/
.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; }
}
Yes, like this (where your breakpoint is set at 48em):
body{
text-align: left;
}
@media screen and (min-width: 48em){
body{
text-align: justify;
}
}
The second rule will override the first if the viewport width is greater than 48em.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
