Change text-align responsively (with Bootstrap 3)?

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?

Answer by StevePeev for Change text-align responsively (with Bootstrap 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.

Answer by totymedli for Change text-align responsively (with Bootstrap 3)?

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.

    
vldmjd 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
  

Answer by Alberdigital for Change text-align responsively (with Bootstrap 3)?

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:

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

Answer by Fred K for Change text-align responsively (with Bootstrap 3)?

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; }  }  

Answer by fvandep for Change text-align responsively (with Bootstrap 3)?

All the "text-align" classes are provided in boostrap : Simply use align-lg-left, align-xs-center, etc ...

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72