Change text-align responsively (with Bootstrap 3)?
CssTwitter Bootstrap-3Css Problem Overview
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?
Css Solutions
Solution 1 - Css
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 - Css
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 - Css
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 - Css
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>
Solution 5 - Css
I like both Alberdigital and Fred K's answers - former provides valid CSS code you can use in your stylesheets, the latter is more thorough.
Here's the best of both worlds.
/*
* Responsive text aligning
* http://ohryan.ca/2014/08/14/set-responsive-text-alignment-bootstrap-3/
*
* EDITED by Nino Škopac for StackOverflow (https://stackoverflow.com/q/18602121/1325575)
*/
.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: 768px) {
.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: 992px) {
.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: 1200px) {
.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 6 - Css
In my case i dont like media queries overuse. So, sometimes i repeat the content in two ways. One custom aligned and the other default aligned. Some code:
<div class="col-md-6 visible-xs hidden-sm hidden-md hidden-lg">
<%-- Some content here --%>
</div>
<div class="col-md-6 text-right hidden-xs">
<%-- Same content here --%>
</div>
This might be usefull in some cases, depends on what you are doing but Keep in mind that is not a good idea to repeat large contents of HTML, this solution might be used for small cases only.
Solution 7 - Css
Have you tried col-auto and mr-auto? Further info: Margin utilities With the move to flexbox in v4, you can use margin utilities like .mr-auto to force sibling columns away from one another.
<div class="container">
<div class="row">
<div class="col-auto mr-auto">
<p>Blah</p>
</div>
<div class="col-auto">
<p>Blah</p>
</div>
</div>
</div>
Solution 8 - Css
It works for me, try this:
text-align: -webkit-center;
Solution 9 - Css
All the "text-align" classes are provided in Bootstrap : Simply use align-lg-left, align-xs-center, etc ...