Positioning

Pushing content right and left within a container

Notice that these positioning classes are applied to the containing columns and not to the centered content.

Content pushed left

Content pushed right

  
<div class="row">
  <div class="col-sm-6 push-left">
      Content pushed left
    </div>
  </div>

  <div class="col-sm-6 push-right">
    Content pushed right
  </div>
</div>

Centering within a container

Notice that these positioning classes are applied to the containing columns and not to the centered content.

Content centered vertically

Content centered horizontally

Content centered vertically and horizontally

  
<div class="row">
  <div class="col-sm-4 center-vertical">
    Content centered vertically
  </div>

  <div class="col-sm-4 center-horizontal">
    Content centered horizontally
  </div>

  <div class="col-sm-4 center-horizontal center-vertical">
    Content centered vertically and horizontally
  </div>
</div>

Absolute positioning within a column

upper-left

upper-right

lower-left

lower-right

Main column content could go here.

  
<div class="row">
  <div class="col-sm-12">
    <div class="upper-left">upper-left</div>
    <div class="upper-right">upper-right</div>
    <div class="lower-left">lower-left</div>
    <div class="lower-right">lower-right</div>

    Main column content could go here.
  </div>
</div>

Floats

Classes left and right can be applied to images (and other elements) to quicly float them. A clear class is also provided to prevent content from filling in space next to floated elements.

In this example, an empty div is used to clear the first floated image. This really isn't a great practice. Perhaps the clear class is better applied to sectioning elements.

  
<img class="left" src="example_image.jpg" alt="">
<p>Classes left and right...</p>

<div class="clear"></div>

<img class="right" src="example_image.jpg" alt="">
<p>In this example...</p>

Text alignment

Four classes are provided for quick alignment of text: text-left, text-right, text-center, and text-justify.

This text is left-aligned.

This text is centered.

This text is right-aligned.

This text is justified. It's going to take a few sentences to really illustrate what's going on with justified text. Now I'm just rambling.

  
<p class="text-left">This text is left-aligned.</p>
<p class="text-right">This text is right-aligned.</p>
<p class="text-center">This text is centered.</p>
<p class="text-justified">This text is justified.</p>