Bootstrap Containers- container and container-fluid classes

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 Responsive 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 of 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:

Bootstrap Responsive Webpage Layout
Fig: Bootstrap Responsive Webpage Layout

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, the Bootstrap Container layout can help you the best.

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

div class container

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

Bootstrap container background color

Bootstrap container background color
Bootstrap container background color

Try these background colors

Sr NoBackground ColorRun It
1bg-primaryTry It
2bg-secondaryTry It
3bg-successTry It
4bg-dangerTry It
5bg-warningTry It
6bg-infoTry It
7bg-lightTry It
8bg-darkTry It
9bg-whiteTry It

Bootstrap container fluid class

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

Your div element should have the class container-fluid

To create the class as container-fluid use this with div as below

Which class in bootstrap make container full width

.container-fluid class in bootstrap make container full width

Difference between container and container fluid

The .container has fixed width for each screen size.

The .container-fluid has full width (100%) for each screen size.