Bootstrap 5 Containers Responsive Containers

Bootstrap 5 Containers Responsive containers are used to group HTML elements and also provide support for grid layout. It has in-built responsiveness which is helpful while development. 

Bootstrap 5 Responsive Container Classes:

1. container-sm: Container small is a class that styles a container that has 100% width till 540px once the width is above 540px it will have a fixed width.
2. container-md: Container medium is a class that styles a container that has 100% width till 720px once the width is above 720px it will have a fixed width.
3. container-lg: Container large is a class that styles a container that has 100% width till 960px once the width is above 960px it will have a fixed width.
4. container-xl: Container large is a class that styles a container that has 100% width till 1140px once the width is above 1140px it will have a fixed width.
5. container-xxl: Container large is a class that styles a container that has 100% width till 1320px once the width is above 1320px it will have a fixed width.

Syntax:

<div class="container-*">
 ...
</div>

Note: Here, * will be replaced by the class values (sm, md, lg, xl & xxl).

Example 1: In this example, we will use containers sm, md, and lg. sm container has 100% until the small breakpoint is reached i.e until 540px similarly for md breakpoint is 720px and for lg it is 960px.

Output:

Example 2: In this example, we will use containers xl and xxl. These containers are provided by bootstrap 5 for extra wide devices where the breakpoint size is 1140px for xl and 1320px for xxl. They can be implemented as follows. 

Output:

Reference: https://getbootstrap.com/docs/5.0/layout/containers/#responsive-containers