Bootstrap responsive container covers 100% available width of the screen until the specified breakpoint, after which it takes max-widths for each of the higher breakpoins. For example, .container-md
is 100% wide to start untill the md
breakpoint is reached, where it will scale up with
lg
, xl
, and xxl
.
Bootstrap containers have the following types of responsive container classes.
container-sm:
It specifies 100% width till the sm
breakpoint i.e. 540px and above 540px, it takes max-width.
container-md:
It specifies 100% width till the md
breakpoint i.e. 720px and above 720px, it takes max-width.
container-lg:
It specifies 100% width till the lg
breakpoint i.e. 960px and above 960px, it takes max-width.
container-xl:
It specifies 100% width till the xl
breakpoint i.e. 1140px and above 1140px, it takes max-width.
container-xxl:
It specifies 100% width till the xxl
breakpoint i.e. 1320px and above 1320px, it takes max-width.
General Syntax
<div class="container-{sm|md|lg|xl|xxl}">Responsive Container</div>
Source Code
<div class="container-sm">
<div class="alert alert-warning mt-4" role="alert">
<p class="text-center">100% wide until small breakpoint</p>
</div>
</div>
<div class="container-md">
<div class="alert alert-success mt-4" role="alert">
<p class="text-center">100% wide until medium breakpoint</p>
</div>
</div>
<div class="container-lg">
<div class="alert alert-info mt-4" role="alert">
<p class="text-center">100% wide until large breakpoint</p>
</div>
</div>
<div class="container-xl">
<div class="alert alert-danger mt-4" role="alert">
<p class="text-center">100% wide until extra large breakpoint</p>
</div>
</div>
<div class="container-xxl">
<div class="alert alert-success mt-4" role="alert">
<p class="text-center">100% wide until extra extra large breakpoint</p>
</div>
</div>
100% wide until small breakpoint
100% wide until medium breakpoint
100% wide until large breakpoint
100% wide until extra large breakpoint
100% wide until extra extra large breakpoint