Bootstrap Fluid Container/Bootstrap Container Fluid

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.

Example

Container(Fixed Width)

Fluid Container(Full Width)

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>

Source Code:Output

Fluid Container - 100% Width At All Breakpoint

In this examples, You will see that fluid container covers 100% viewport width while fixed width container takes max-width.

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 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.

Example

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

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>

Source Code:Output

Responsive Container - 100% Width Till the Specified Breakpoint & Then It Takes Max width For All Higher Breakpoints.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4