The container is an important element of the Bootstrap framework, forming the foundation for the implementation of Bootstrap’s much loved grid system. Choosing the appropriate one for your website lays out the foundation for your entire design to be based around, as such, its importance can’t be understated.
Choosing which container to use can cause confusion for some. As such, this article outlines the basics of the two classes Bootstrap provides to specify the layout of a website.
<div class="container"> <!-- Your content goes here --> </div>
This class limits the width of content to a dynamic range which is roughly equivalent to two thirds of the width of the browser window (viewport), though this may vary. Occupying a larger width as the device width decreases, and less as the device width increases.
This allows the visitor’s focus to remain on the main, relevant content, without having to drift their focus too far away to find something, which can cause confusion and/or a distraction from where you intend on maintaining the attention of your visitor.
Many websites (blogs particularly) make excellent use of this narrower layout, popular examples being:
In fact, even the page you are viewing right now is making use of this form of layout.
This class defines an area encompassing the full width of the viewport, regardless of the size of the viewport.
This is commonly found where a more complex user interface is required to maximize the use of free space such as in web applications. Pages displaying dashboards as well as reports spring to mind at this.
By maximizing use of the space afforded by larger desktop monitors, more information is delivered to the visitor. This also assists functionality, as sidebars are often incorporated into the layout.
Some popular websites which make use of the wide layout are:
It is worth noting that the WordPress Admin area also uses this ‘full-width’ style.