Bootstrap 5

Bootstrap Tutorials

Bootstrap 5 Containers

Bootstrap 5 Containers

 

Containers are the most basic layout element in Bootstrap. They are used to contain, pad, and (sometimes) center the content within them. Bootstrap comes with three different containers:

 

Three Different Containers are:-

 

  1. .container:- which sets a max-width at each responsive breakpoint.
  2. .container-fluid:- which is width: 100% at all breakpoints.
  3. .container-{breakpoint}:- which is width: 100% until the specified breakpoint.

 

For your Inforamtion:-

 

We can also use the .container-sm|md|lg|xl classes to determine when the container should be responsive. The max-width of the container will change on different screen sizes/viewports. These are:

 

Further Explanation:-

 

Class Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
XXL
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

Code Explanation

All Tutorials related to Bootstrap Tutorials

All Sections related to Bootstrap 5