Bootstrap Containers

Here, we will check out the Containers, one of the most basic web page layouts employed by Bootstrap to design the web pages.

But before we move into that, let us first understand what a layout is and how a typical layout is made to come to real-world page.

Bootstrap Webpage Layout

A webpage layout is basically the template that helps you understand the sizing, positioning and styling of all its components.

More or less, every layout takes care about the following points:

  • Header: The top part of the webpage. It usually contains your website’s logo or name.
  • Navigation Section: This is the section of the page where all the Navbars are present. These can be normal navigation menus or drop-down carrying sub-menu of the selected menus.
  • Content Section: The content section contains all the necessary stuff for that web page.
  • Footer: The footer section of the web-page generally contains links to official stuff about the website or web application. You can find the links for Privacy Policy, About Us and Available Downloads from this part of the page.

This is the basic layout of any web page you’ll come across. A code below will show you a typical web page using the above mentioned layout:

Try the above code Run It

Bootstrap Container

The Bootstrap container layout is one of the most basic layouts for a webpage.

When you’re using the grid-system for your webpage, Bootstrap Container layout can help you the best.

Above-mentioned we’ll have to choose from a fixed-width/ fluid-width, responsive containers that suit best for our webpage vision.

The code below will illustrate the Bootstrap container’s usage on the web-page:

You can also use .container-fluid for use a full-width container that will span in the entire width of the viewport.