Wrappers

A horizontally centered wrapper that provides a consistent central column. This should be used in all contexts where the content needs to be in the center of the page.

Wrappers have several width modifiers, or exceptions, for easily setting up narrower centered layouts.

Inline padding can be removed by adding data-flush.

Wrappers demo

On large screens, you can expand the following demo:

<div class="wrapper" data-size="xxl">
  <div>Content ...</div>
</div>

<div class="wrapper" data-size="xl">
  <div>Content ...</div>
</div>

<div class="wrapper" data-size="lg">
  <div>Content ...</div>
</div>

<div class="wrapper" data-size="md">
  <div>Content ...</div>
</div>

<div class="wrapper" data-size="sm">
  <div>Content ...</div>
</div>