Bootstrap 5 Layout Containers

Bootstrap5 Layout Containers are considered the most basic layout that can be used and they can be used to contain other layouts. Containers are basically used to add pad the contents inside or center the items inside the container. In this article, we'll see Bootstrap 5 Layout Containers.

Layout Containers: There are three types of containers available in Bootstrap i.e., Default container, Fluid container, and responsive container.

• Default Container: This is the most simple one with all the basic necessities. The default Container is a responsive container and has a fixed width for every breakpoint or screen size like small, medium, large, and so on. 
• Fluid containers: This is used to utilize the whole space that is provided to the container. The Fluid Container is a container that occupies all the space available from one end to the other end for every breakpoint or screen size like small, medium, large, and so on.
• Responsive Container: This is used to set a custom responsive container. The Responsive Container is the one that becomes a container after specifying the specific breakpoint or screen size like sm, md, lg, xl and xxl. Before hitting that breakpoint size which is specified it acts as a Fluid container.
• Sass: It has a set of predefined container classes which makes building layouts easier. We can customize it by changing the Sass map. 

Syntax:

<div class="Container-class">
 // Content
</div>

Example 1: The code demonstrates how we can apply the default and fluid container in basic <div> element. Here the first div is a Default container and the second one is the Fluid container.

Output:

Example 2: The code demonstrates the Responsive container in an <div> element. The first div attains container properties after sm viewport size, the second after md viewport size, and the last one after lg viewport size.

Output:

Reference:https://getbootstrap.com/docs/5.0/layout/containers/