Containers
Containers provide basic layout functionality. The term "container" has been borrowed from Twitter's Bootstrap, and is meant to imply an element that wraps or "contains" content.
In Canvas, containers can be used independent of the Grid System. Properties such as a width and margin for the container vary depending on both the class and screen resolution. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).
A container can be fixed or fluid. A fixed container is one where the width of the container is fixed value. That value may change based on the screen resolution to take advantage of additional horizontal screen space. Use the class .container
to create a fixed with container. By default a fixed width container has no margin or padding.
<div div class="container">
<!-- Container content goes here -->
</div>
In previous versions of CNVS, .container-fluid
was used to encapsulated content that should fill the width of it’s parent. A fluid container applied outerward spacing to the left and right of the Container and was a quick way to create a header, banner, or other full-width components. With the introduction of the .pod
layout component (see: Pods) we Containers have been generalized to be used only for bounding content by width. To create the previously seen by .container-fluid
it is now suggested that you wrap content in a .pod
.
<div class="pod flush-top flush-bottom">
<!-- Container content goes here -->
</div>