Bootstrap 5 Container

Bootstrap 5 Container

Bootstrap 5 container is the basic layout element in bootstrap that is used to create empty space (padding) around the content inside of them, and there is three container class available in bootstrap.

  1. The .container class provides a responsive fixed with container that has by default margin , left and right padding upto 15px.
  2. The .container-fluid class provides full with a container that covers the whole width of the device and has by default left and right padding up to 15px.
  3. The .container-{breakpoint}, that covers width: 100% until the specified breakpoint.

Note: The container has three types namely fixed-width container, fluid container & container having breakpoint.

Fixed Width(Container)

To create a fixed container, use the .conatiner class. Please remember that this max-width will be responsive with respect to device breakpoint.

Understand the max-width with respect to device breakpoint.

Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px XX-Large ≥1400px
.container 100% 540px 720px 960px 1140px 1320px

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Learn Bootstrap 5 Fixed Width Container

A fixed width container has by default padding around the content.

Code Explanation

Note: In this example,.container class is assigned to the parent element base class. This is the process of creating the fixed-width container.

Full Width Container (Fluid Container)

To create full width container that covers complete width(100% width) of the screen,use .container-fluid class

max-width with respect to device breakpoint.

Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px XX-Large ≥1400px
.container-fluid 100% 100% 100% 100% 100% 100%

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Learn Bootstrap 5 Container Fluid

The container fluid covers the whole available width.

Code Explanation

Note: To create bootstrap 5 full width container, assign .container-fluid to the parent element base class.

Bootstrap 5 Responsive Container

Bootstrap 5 responsive container provides flexibility to display 100% width until the specified breakpoint is reached, then it applies max-width for each higher breakpoint.

For example .container-sm provides 100% wide to start until the sm breakpoint is reached,Then it scale up with md, lg, xl, and xxl.

Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px XX-Large ≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

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

Code Explanation

Note: In this example, the responsive container concept is used to create 100% width until the specified breakpoint is reached, then it applies max-width for each higher breakpoint.

Online Test / Quiz