All geek questions in one place

Responsive text alignment on Twitter Bootstrap 2.x

In bootstrap, I try to create a project that groups two pieces of text (label A and some content B ), placing them next to each other, for example:

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

Using responsive layouts in bootstrap, this looks great until the grid is folded into narrow windows. Then it will be:

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

... and it looks like they are no longer connected.

I would prefer that after laying the elements be either centered or both aligned left.

I know that I can use the .visible- * and .hidden- * classes to fix this, but it seems like a hack. Is there an easy way to change the alignment of the text in response to the loading parts of the grid?

+6
source share
2 answers

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 are not using LESS, change @screen-tablet to 768px , @screen-desktop to 992px and @screen-lg-desktop to 1200px .

+10
source

To right-align (left-alignment will be the default), you can use text alignment: right on your span. To make this responsive use of media queries, to apply it only on large 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: fooobar.com/questions/48809 / ... since version 2.3. Twitter Bootstrap also has text classes. So you can use: <div class="span6 text-right">A (right-aligned)</div> . Also this class does not respond. text-right adds text-align: directly to the style of your element. Therefore, you need media queries to reset. reset 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 to the float element. Therefore, to use them, you will need an additional shell:

 <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 also use media queries. 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

+1
source

Source: https://habr.com/ru/post/948364/

More articles:


All Articles