In this video, we will discuss what is Bootstrap containers and how does it work on different screen sizes using implementation.
Bootstrap Containers are the basic layout of elements that are required when we are using the default grid system layout. It is a basic building block of bootstrap that wraps a page’s content. It is responsible for setting and aligning content within it according to the viewport or given device.

Containers are defined using the container .container class. We can also use nested containers to design the web page layout.
Basically, there are three types of containers available in bootstrap:

1) Default Container
2) Responsive Container
3) Fluid Container

1) Default Container:
The default container uses the ‘.container’ class that provides a responsive fixed-width container. The .container class sets the max-width at each responsive breakpoint. This class adds some padding on left and right sides of the container.
Syntax:

Content…

2) Fluid Container:
The fluid container uses the‘ .container-fluid’ class that provides the full-width container taking the entire width of the viewport. The .container-fluid class sets the width: 100% on all breakpoints.
Syntax:
Content…

3) Responsive Container:
Responsive containers are responsive in nature. Responsive containers allow you to specify a class that is wide until the specified breakpoint is reached, after which we apply max-widths for each of the higher breakpoints.
Syntax:
Content…

Note:
The responsive container is created using the .container class along with breakpoints sm, md, lg, xl, xxl.

For Example -
.container-{breakpoints}

Container in Bootstrap: https://www.geeksforgeeks.org/what-is-bootstrap-container/