Bootstrap Fluid Container
Bootstrap fluid container/Bootstrap container fluid spans the entire width of the viewport or screen. It takes 100% available width on every breakpoints and does not create any left and right margin.
Bootstrap Container Fluid Class :
.container-fluid: — This class is used to make full width Bootstrap container i.e. fluid container.
General Syntax
<div class="container-fluid">
...
</div>
Source Code
<div class="container-fluid">
<div class="alert alert-success mt-4" role="alert">
<p class="text-center">Fluid Container - 100% Width At All Breakpoint</p>
</div>
</div>
Can you make fluid container for a specific breakpoint ? The answer is yes. You can make fluid container for a specific breakpoint through .container-{breakpoint}
class. It covers 100% width until the specified breakpoint.
Bootstrap Responsive Container Classes
There are following types of responsive Bootstrap container classes.
container-sm:
It specifies 100% width till thesm
breakpoint i.e. 540px and above 540px, it takes max-width.container-md:
It specifies 100% width till themd
breakpoint i.e. 720px and above 720px, it takes max-width.container-lg:
It specifies 100% width till thelg
breakpoint i.e. 960px and above 960px, it takes max-width.container-xl:
It specifies 100% width till thexl
breakpoint i.e. 1140px and above 1140px, it takes max-width.container-xxl:
It specifies 100% width till thexxl
breakpoint i.e. 1320px and above 1320px, it takes max-width.
General Syntax
<div class="container-{breakpoint}"></div>
Source Code
<div class="container-sm"></div>
<div class="container-fluid">
<div class="alert alert-success mt-4" role="alert">
<p class="text-center">Responsive Container - 100% Width Till the Specified Breakpoint & Then It Takes Max width For All Higher Breakpoints.</p>
</div>
</div>
If you want to learn more about Bootstrap container, click here.