Change text-align responsively (with Bootstrap 3)?

Question

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 scr

Answer 1

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.

Answer 2

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>

Answer 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.

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