Bootstrap 5 Containers
Containers provide the foundation for page layout.
Bootstrap requires a containing element to wrap elements and contain its grid system (more on the grid system next). Bootstrap's container classes were created specifically for this purpose.
Bootstrap 5 includes three different container types:
- Fixed
- Fluid
- Responsive
Fixed Containers
A fixed container is a (responsive) fixed width container. As you resize your browser, its width remains intact, until it passes a certain breakpoint (as specified by you — more on that next), at which time it will resize to the new width for that break point.
Fluid Containers
A fluid container spans the full width of the viewport. It will expand and contract fluidly as you resize the browser. This is in contrast to the fixed width container which will appear to "jump" to the new size as you pass a given break point.
Responsive Containers
Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached. You specify the breakpoint by appending it to the container's class (for example container-lg to make it 100% wide up until the large breakpoint). The breakpoints can be any of sm, md, lg, xl, and xxl.
While you can create Bootstrap pages without containers, they are required when using the Bootstrap grid system.