Background Wrappers

Make your content span the full-width of the screen, and add an optional background color or background pattern.

Background wrappers span the full-width of the screen and help to break up content and add variety to your page layout. You can use any background color utility class (e.g., .bg-blue) in combination with a background pattern option (e.g., bg-triangles-top-left) on your background wrapper. Ensure you maintain proper color contrast and accessibility. Arizona Bootstrap provides a color contrast tool that shows you which Branded color combinations are accessible.

<div class="container">
  <div class="row">
    <div class="col-12">
      ...
    </div> <!-- close column -->
  </div> <!-- close row -->
</div> <!-- close container -->
<div class="background-wrapper">
  <div class="container">
    ...
  </div>
</div><!-- close background wrapper -->

Live Demo

Click on the background color options below to see a live preview of what the background wrapper looks like in your selected color and/or background pattern.

Background Wrapper Example

A background wrapper can use any combination of the background color utility classes and the background pattern options. However, you must ensure your selection ensures sufficient color contrast and proper accessibility standards.

Accessibility Standards

<div class="background-wrapper" id="background-wrapper-live-demo">
  <div class="container">
    <div class="row">
      <div class="col-12 text-center">
        <h3>Background Wrapper Example</h3>
        <p>A background wrapper can use any combination of the background color utility classes and the background pattern options. However, you must ensure your selection ensures sufficient color contrast and proper accessibility standards.</p>
        <p><a href="http://itaccessibility.arizona.edu/guidelines/standards" class="btn btn-blue" target="_blank">Accessibility Standards</a></p>
      </div>
    </div>
  </div>
</div>