Container
How it works#
The container component is meant to be used as a wrapper for content areas. It adds padding so that content does not run into the sides of the viewport. By using a consistent wrapper element, each content region will have the same width at each breakpoint and provide consistent page alignment, while allowing background styles to bleed to the edge of the viewport.
The container element has a width of 100% and uniform left and right padding until it reaches its max-width at the xl breakpoint. At that point width will remain at max-width and the left and right margins will be automatic.
In the example below we have wrapped each content section with a bux-container div. The background styles for each section are applied to the parent of the container element.
A collaborative program est non tortor iaculis tempor Urban Arts Space a collaborative program chimes of Orton Hall teaching and learning that power is human potential — an astonishing power so elemental, the world thrives on it. So vital, the world depends on it it’s seeing this potential in each of us — in all of us — that brings people closer together.
<div id="main-content">
<div class="bux-container">
<p>...</p>
</div>
</div>
<footer>
<div class="bux-container">
<p>...</p>
</div>
</footer>