In bootstrap, containers are the basic layout elements, and these are required to provide a responsive fixed-width or full-width container for the site content when we are using the default grid system.
Following are the two container classes available in bootstrap to wrap the site contents.
In bootstrap, the .container class is useful to provide a responsive fixed width container that means the max-width will vary at each breakpoint.
Following is the pictorial representation of site layout when we use .container class to wrap site contents.
We can use the bootstrap container class to wrap the site content in a responsive fixed-width container like as shown below.
Following is the example of using .container class to wrap the site contents in bootstrap.
If you observe the above example, we wrapped all the site content into a div tag by specifying the container class.
In bootstrap, the .container-fluid class is useful to provide the responsive full-width container that means the container will be 100% wide all the time.
Following is the pictorial representation of site layout when we use .container-fluid class to wrap the site contents.
We can use the bootstrap container-fluid class to wrap the site content in a responsive full-width container like as shown below.
Following is the example of using .container-fluid class to wrap the site contents in bootstrap.
If you observe the above example, we wrapped all the site content into a div tag by specifying the container-fluid class.
This is how we can use the bootstrap containers to wrap the site content by specifying either full or fixed width using container and container-fluid classes.