Containers in Bootstrap 5

Bootstrap Containers

A container is a class that is used to wrap the content of a web page.

Containers are used to provide a consistent layout and padding for the content, and to ensure that the content fits within the width of the viewport.

There are three types of containers in Bootstrap:

• .container: This is a fixed-width container that has a maximum width based on the device size. It centers the content and adds padding to the left and right sides.

• .container-fluid: This is a full-width container that spans the entire width of the viewport. It does not add any padding to the sides, but it does center the content vertically.

• .container-{breakpoint}: This is a responsive container that changes its maximum width based on the device size. The {breakpoint} specifies the device size at which the container should change its width.

As an example:

Editor

Loading...

In this example:

• We have used the .container, .container-fluid, and .container-md classes to create different types of containers for the content.
• We have also used the .bg-primary, .bg-success, and .container-warning classes to give different background color to the container.
• The h1 and p tags are standard HTML tags, but they are styled using Bootstrap's default styles.

Container Padding

Containers in Bootstrap have padding to create space between the content and the edges of the container.

The default padding values for a container are 15px on the left and right sides. This padding value can be customized using CSS.

As an example:

<div class="container" style="padding-top: 50px; padding-bottom: 50px;">
     <h1>Hello, world!</h1>
     <p>This is a basic Bootstrap example with custom padding.</p>
</div>

In this example:

• We have added 50px of padding to the top and bottom of the container using the padding-top and padding-bottom properties.

Container Border and Color

You can use various classes to add borders and change the background color of containers easily.

Here are some examples:

• Border: To add a border to a container, you can use the .border class. Bootstrap provides several border styles, including solid, dotted, dashed, double, groove, ridge, inset, and outset. You can also specify the border color and width using the .border-{color} and .border-{width} classes, respectively.

As an example:

<div class="container border border-primary border-3">
     <h1>Hello, world!</h1>
     <p>This is a basic Bootstrap example with a border.</p>
</div>

In this example:

• We have added the .border, .border-primary, and .border-3 classes to the container to create a solid 3px border with the primary color.

• Border radius: To add rounded corners to the container's border, you can use the .rounded class. Bootstrap provides several radius sizes, including rounded, rounded-0, rounded-sm, rounded-lg, and rounded-pill.

As an example:

<div class="container border rounded-lg">
     <h1>Hello, world!</h1>
     <p>This is a basic Bootstrap example with rounded borders.</p>
</div>

In this example:

• We have added the .rounded-lg class to the container to create rounded corners with a larger radius.

• Background color: To change the background color of a container, you can use the .bg-{color} class. Bootstrap provides several background color classes, including bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, and bg-light. You can also use the .bg-transparent class to make the background color transparent.

As an example:

<div class="container border rounded-lg bg-info">
     <h1>Hello, world!</h1>
     <p>This is a basic Bootstrap example with a colored background.</p>
</div>

In this example

• We have added the .bg-info class to the container to create a background color with the info color.

You can also combine these classes to create more complex styles for your containers.

As an example:

<div
     class="container border border-primary border-3 rounded-lg bg-dark text-white p-3"
>
     <h1>Hello, world!</h1>
     <p>This is a basic Bootstrap example with custom styles.</p>
</div>

In this example:

• We have combined the .border, .border-primary, .border-3, .rounded-lg, .bg-dark, .text-white, and .p-3 classes to create a container with a thick blue border, rounded corners, a dark background color, white text, and padding.

Responsive Containers

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

tip

Using these classes, you can create containers that are optimized for different screen sizes, ensuring that your content looks good and is easy to read on all devices.