6 #Arrangement Arrangement

6.1 #Arrangement.Alignment Text Alignment

Example

Left aligned text.

Center aligned text.

Right aligned text.

  <p class="text-left">Left aligned text.</p>
  <p class="text-center">Center aligned text.</p>
  <p class="text-right">Right aligned text.</p>

6.2 #Arrangement.Nowrap Nowrap

nowrap

Prevent text in an element from line wrapping. In the example below, compare the first date column which does not have the class applied to the second one which does:

Example
2012-05-16 2012-05-16 Long content here forces other cells to be narrow. 
<table class="table">
  <tbody>
    <tr>
      <td>2012-05-16</td>
      <td class="nowrap">2012-05-16</td>
      <td>Long content here forces other cells to be narrow.</td>
    </tr>
  </tbody>
</table>

6.3 #Arrangement.Spacers Spacers

The default bottom margins of components should be correct for most situations. However, you may occasionally need to override the defaults. You can do this by using spacer-* classes.

Example

XS spacer

Small spacer

Medium spacer

Large spacer

XL spacer

  <p class="spacer-xs">XS spacer</p>
  <p class="spacer-sm">Small spacer</p>
  <p class="spacer-md">Medium spacer</p>
  <p class="spacer-lg">Large spacer</p>
  <p class="spacer-xl">XL spacer</p>

6.4 #Arrangement.Split Split

split, split-left, split-right

Use the split class to divide content to the left and right. (Has no effect on small screens.)

Example
Change or reset my password
<div class="split">
  <div class="split-left">Change or reset my password</div>
  <div class="split-right">
    <button class="btn btn-primary btn-cta">Sign in</button>
  </div>
</div>