What is a Bootstrap container & how make it responsive?
Bootstrap 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.
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"></div>Full Width Container (Fluid Container)
To create a full-width container that covers the complete width(100% width) of the screen, use the .container-fluid class.
General Syntax
<div class="container-fluid">container fluid</div>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 scales up with md, lg, xl, and xxl.
To learn more about, Bootstrap containers, click here.
