Best IT Recipes

Change text alignment in response (using Bootstrap 3)?

I am using Bootstrap 3 for a blog. In my custom CSS, I recently added

body { text-align: justify; ... }

I like the result on large screens (tablet, desktop). But on small screens (phone), defensible text doesn't work much because of narrower columns plus my occasional use case of the long-ish-technical-terms-like-this blog.

Is it possible to quickly have text-align: justify only on large screens?

Is it possible to do this only with CSS, or will I need to write some custom JS for this?

+56
css twitter-bootstrap-3
Sep 03 '13 at 21:54
source share
8 answers

Yes, like this (where your breakpoint is set at 48 m):

 body{ text-align: left; } @media screen and (min-width: 48em){ body{ text-align: justify; } }

The second rule will cancel the first if the width of the viewport is greater than 48 m.

+31
Sep 03 '13 at 22:01
source share

Although the solution provided is absolutely correct, I think there is another approach that may be interesting. Bootstrap does not provide alignment classes that depend on the size of the window, 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 can add these classes to your html elements:

 <body class="text-justify-lg">

You can also create CSS rules for text-left-xx and text-right-xx.

+101
Dec 03 '14 at 8:41
source share

For a more complete solution, try the following:

 /* * 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; } }
+72
Mar 27 '15 at 10:17
source share

Live demo

Just resize the window and you will see how it switches 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>
+6
Sep 03 '13 at 22:01
source share

I like both Alberdigital answers and Fred K - the former provides valid CSS code that you can use in your stylesheets, the latter being more thorough.

Here is 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; } }
+4
Jun 14 '17 at 2:08 on
source share

In my case, I do not like to use media queries. So sometimes I repeat the content in two ways. One user is aligned and the other is aligned by default. 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>

Apologies for my bad english;)

+1
Jun 27 '17 at 15:04
source share

This works for me, try the following:

 text-align: -webkit-center;
-2
Sep 13 '17 at 8:03 on
source share

All text-align classes are provided in Bootstrap: just use align-lg-left , align-xs-center , etc.

-6
Jan 15 '16 at 9:31
source share


More articles:


All Articles