The container is a bootstrap default class that arranges the content of the div inside your screen.
containers square measure the foremost basic style element in Bootstrap and square measure needed once utilizing our default network framework. Holders square measure utilized to contain, cushion, and (some of the time) focus the substance within them. whereas holders are settled, most formats do not like a settled compartment.
Table of Contents
Bootstrap5 accompanies 3 distinctive Containers:
- container, that sets the most breadth at every responsive breakpoint
- .container liquid, that is width: 100 percent in the least breakpoints
- .container, that is width: 100 percent till the predefined breakpoint
The table beneath outlines however each holder’s most breath analysis to the primary .compartment and .holder liquid across every breakpoint.
See them in reality and appearance at them in our Grid model. An example is the Featured image.
What’s new in a Bootstrap 5 container?
A new add .container-XXL class has been added to Bootstrap 5.
How to use Container class in bootstrap 5?
The container class is very easy to use which helps make your design responsive and we will see how to use it.
Default Container Class
This container is a def-default class that takes a breakpoint for it is a responsive and fixed-width container
<div class="container">
</div>Responsive Containers Class
Responsive containers permit you to specify a category that’s 100% wide till the desired breakpoint is reached, once that we tend to apply max-widths for every one of the upper breakpoints. for instance, .container-sm is 100% wide to begin till the sm breakpoint is reached, wherever it’ll proportion with md, lg, xl, and xxl.
Example:-
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>Fluid Container Class
Container-fluid used for full width widens according to viewport
<div class="container-fluid">
</div>
