City of Tampa Style Guide

Breakout of Containers 6.1

You can break out of the bootstrap container using the breakout-container class

When to use: Add it to a section to make a full width background color

When not to: When you have other columns this will overlay above them..

Notes: Use with caution!

<insert-markup>layout.breakout-</insert-markup>

This content has a max width

I'm breaking the container.

This content has a max width

<!-- Row with equal columns that is vertical on sm -->
<div class="container">
  <p>This content has a max width</p>
  <div class="breakout-container">I'm breaking the container.</div>
  <p>This content has a max width</p>
</div>
<!-- Row with equal columns that is vertical on sm -->
<div class="container">
  <p>This content has a max width</p>
  <div class="breakout-container">I'm breaking the container.</div>
  <p>This content has a max width</p>
</div>

Source: src/scss/base/_layouts.scss, line 57