Responsive text alignment in Twitter's Bootstrap 2.x

Question

In bootstrap, I am trying to achieve a design that groups two pieces of text (a label, A, and some content, B) by having them near each other, like so:

A (right-aligned) | B (left-aligned)

Using responsive layouts in bootstrap, this looks great until the grid is stacked on narrow windows. Then it becomes:

                       |      A (right-aligned)
B (left-aligned)       |

... and it looks as though the two are no longer related.

I would prefer that once stacked, the elements would be either both centered or both left-aligned.

I know that I can use the .visible-* and .hidden-* classes to fix this, but that feels like a hack. Is there a simple way to change text alignment in response to bootstrap stacking parts of the grid?

Answer 1

In Bootstrap 3 using LESS, I added the following:

/* Defaults */
.text-center-sm,
.text-center-md,
.text-center-lg,
.text-right-sm,
.text-right-md,
.text-right-lg { text-align: inherit; }

/* Define xs styles after defaults so they take precedence */
.text-center-xs { text-align: center; }
.text-right-xs { text-align: right; }

/* Small grid */
@media (min-width: @screen-tablet) {
  .text-center-sm, .text-center-xs { text-align: center; }
  .text-right-sm, .text-right-xs { text-align: right; }
}

/* Medium grid */
@media (min-width: @screen-desktop) {
  .text-center-md, .text-center-sm, .text-center-xs { text-align: center; }
  .text-right-md, .text-right-sm, .text-right-xs { text-align: right; }
}

/* Large grid */
@media (min-width: @screen-lg-desktop) {
  .text-center-lg, .text-center-md, .text-center-sm, .text-center-xs {
    text-align: center;
  }
  .text-right-lg, .text-right-md, .text-right-sm, .text-right-xs {
    text-align: right;
  }
}

If you're not using LESS, change @screen-tablet to 768px, @screen-desktop to 992px, and @screen-lg-desktop to 1200px.

Answer 2

To right align (left align will be default) you can use text-align:right on your span. To make this responsive use media queries to only apply it on big screens:

@media (min-width:768px)
{
  .text-right-responsive {text-align:right;}
  .text-left-responsive {text-align:left;}
}  

html:

<div class="container">
<div class="row">
<div class="span6 text-right-responsive">A (right-aligned)</div>
<div class="span6 text-left-responsive">B (left-aligned)</div>
</div> 
</div> 

See also: https://stackoverflow.com/a/14809431/1596547 since version 2.3 Twitter's Bootstrap also have text-* classes. So you could use: <div class="span6 text-right">A (right-aligned)</div>. Also this class is not responsive. text-right only adds text-align:right to your element's style. So you need media queries to reset this too. Reset the text alignment for small screens:

 @media (max-width:767px)
 {
    .text-right {text-align:left;}
    .text-left {text-align:left;}
 } 

The pull-right / pull-left classes add a float to the element. So to use them you will need an extra wrapper:

<div class="container">
<div class="row">
  <div class="span6"><span class="pull-right">A (right-aligned)</span></div>
  <div class="span6"><span class="pull-left">B (left-aligned)</span></div>
</div> 
</div>

In this case you can use media queries also. Now you need to reset the float for small screens:

@media (max-width:767px)
{
  .pull-right {float:none;}
  .pull-left {float:none;}
} 

DEMO: http://bootply.com/66024