Change text-align responsively (with Bootstrap 3)?
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?
Solution 1:
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.
Solution 2:
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; }
}
Solution 3:
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.
Solution 4:
Live Demo
Just resize the window and you can see how it will switch to text-align:left; if the window size is less than 400px.
<style>
@media screen and (min-width: 400px) {
.text1 {
text-align: justify;
}
}
p {
text-align: left;
}
</style>
<p class="text1">vlédmjd fsdi dlin dsilncds ids nic dsil dsinc dlicidn lcdsn cildcndsli c dsilcdn isa slia sanil sali as as nds nds lcdsicd insd id nid ndi cas sal sa insalic lic sail il dnsailcn lic il eilwnvrur vnrei svfd nvfn vk in f,vn y,h ky,vnkivn iesnvfilsdnhvidsnvdslin dlindilc ilc lisn asiln sliac lasnl ciasnc in li nsailcn salin ilanclis cliasnc lincls iandlisan dlias casilcn alincalis cli ad lias naslicn aslinc dliasnc slince ineali dliasnc liaslci nasdlicn laincilancfrelvnln dsil cndlic ndlicna linasdlic nsalinc lias</p>