Bootstrap 5 Container

Bootstrap 5 Containers are 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.

General Syntax

<div class="container">Bootstrap 5 Fixed With Containe</div>

Full Width Container (Fluid Container)

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

General Syntax

<div class="container-fluid ">Container fluid(Container Full Width)</div>

Responsive Container

Responsive containers provide 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.

General Syntax

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

If you want to learn more about Bootstrap 5, then click here.