Bootstrap 3: text-align change at breakpoint?

Question

Is there a built-in way in Bootstrap 3.x to set/remove a class like "text-right"?

For example, I have a column <div class="col-md-6 text-right"> but at xs size I don't want the text-right to apply.

I know how to do this with my own classes/media queries but was wondering if there was something simple built in.

Answer 1

These are available in Bootstrap 4: Text Alignment

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="text-center">
  <p class="text-left">Left aligned text on all viewport sizes.</p>
  <p class="text-center">Center aligned text on all viewport sizes.</p>
  <p class="text-right">Right aligned text on all viewport sizes.</p>

  <p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
  <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
  <p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
  <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
</div>

Answer 2

Nope. This has been proposed a few times (e.g. https://github.com/twbs/bootstrap/issues/11292 , https://github.com/twbs/bootstrap/pull/9408 ), but has so far been rejected. It's the sort of thing that'd be very appropriate for a CSS/Sass/Less add-on library for Bootstrap though.