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.