In the previous chapter, we learned that Bootstrap requires a container element to wrap the content of a website. We can use the following two container classes: * The `.container` class is the default container, providing a fixed-width layout that adjusts with different screen sizes. * The `.container-fluid` class is used for a 100% width container that spans the entire viewport. Using this container class will always fill the full width of the screen, making it suitable for full-screen layouts. !(#) * * * ## Fixed Width The `.container` class is used to create a fixed-width responsive layout. **Note:** The width (max-width) scales proportionally with the screen width. | | Extra small screens <576px | Small screens ≥576px | Medium screens ≥768px | Large screens ≥992px | Extra large screens ≥1200px | XXL screens ≥1400px | | --- | --- | --- | --- | --- | --- | --- | | max-width | 100% | 540px | 720px | 960px | 1140px | 1320px | In the following example, we can try resizing the browser window to see how the container width changes across different screens: ## Bootstrap5 .container Example [Try it »](#) **Note:** XXL screens (≥1400px) are new in Bootstrap 5. Bootstrap 4's largest was Extra large screens (≥1200px). * * * ## 100% Width The `.container-fluid` class is used to create a full-screen container that always spans the entire width of the screen (width is always 100%): ## Bootstrap5 .container-fluid Example [Try it »](#) * * * ## Container Padding By default, containers have left and right padding, but no top or bottom padding. Bootstrap provides some spacing classes for adding padding. For example, `.pt-5` is used to add top padding: ## Bootstrap5 Example [Try it »](#) * * * ## Container Borders and Colors Bootstrap also provides some border (`border`) and color (`bg-dark`, `bg-primary`, etc.) classes to style containers: ## Bootstrap5 Example [Try it »](#) We will explain these styles in detail in later chapters. * * * ## Responsive Containers You can use the `.container-sm`, `.container-md`, `.container-lg`, `.container-xl` classes to create responsive containers. The container's `max-width` property value will change based on the screen size. | Class | Extra small screens <576px | Small screens ≥576px | Medium screens ≥768px | Large screens ≥992px | Extra large screens ≥1200px | XXL screens ≥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 | ## Bootstrap5 Example [Try it »](#)