Bootstrap 5 Containers

You learned from the previous chapter that Bootstrap requires a containing element to wrap site contents.

Containers are used to pad the content inside of them, and there are two container classes available:

1. The .container class provides a responsive fixed width container

2. The .container-fluid class provides a full width container spanning the entire width of the viewport

.container

.container-fluid

Fixed Container

Use the .container class to create a responsive, fixed-width container.

Note that its width ( max-width ) will change on different screen sizes:

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra Large ≥1200px	XXL ≥1400px
max-width	100%	540px	720px	960px	1140px	1320px

Open the example below and try resizing the browser window — you'll notice that the container's width adjusts automatically based on the screen size breakpoints.

Class / Utility	Layout Type	Description
.container	Fixed-width layout	Adjusts width based on screen size, adds margin to center content
.container-fluid	Full-width layout	Spans the full width of the screen (100%), good for edge-to-edge designs
p-5	Padding	Adds padding on all sides (e.g., p-5 adds large space)
bg-primary, bg-light	Background Color	Applies background colors like blue (bg-primary) or light gray (bg-light)
my-5	Vertical Margin	Adds margin on top and bottom of the element (Y-axis spacing)
border	Border	Adds a border around the container or element

Container

Output :

Fluid Container

Use the .container-fluid class to create a full width container, that will always span the entire width of the screen (width is always 100%):

Output :

Container Padding

By default, containers include padding on the left and right sides, but none on the top or bottom. That’s why spacing utilities like padding and margin are commonly added to enhance the layout. For instance, .pt-5 applies extra padding to the top.

Output :

Container Border and Color

Other utilities, such as borders and colors, are also often used together with containers:

Output :

Responsive Containers

You can use .container-sm, .container-md, .container-lg, or .container-xl classes to set the breakpoint at which the container becomes responsive.

The max-width of the container will change on different screen sizes/viewports:

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

Detail:

Class	Breakpoint	Screen Width	Description
.container-sm	Small	≥576px	Container becomes fixed width starting at 576px screen width
.container-md	Medium	≥768px	Fixed width starts at medium screens (tablets and up)
.container-lg	Large	≥992px	Fixed width from laptop-sized screens and larger
.container-xl	Extra Large	≥1200px	Fixed width container starting at larger desktop screens
.container-xxl	Extra Extra Large	≥1400px	Applies fixed width to very large screens and ultra-wide displays

Output :