Learn with us

In Bootstrap 5, containers are used to wrap and contain the content of a webpage. They provide a fixed or fluid width container that helps in creating responsive layouts. There are two types of containers in Bootstrap 5: .container and .container-fluid.

1. .container: This class creates a responsive fixed-width container. It sets a maximum width based on the device’s screen size. The container width adjusts and remains centered as the screen size changes. Here’s an example:

<div class="container">
  <!-- Content goes here -->
</div>

2. .container-fluid: This class creates a full-width container that spans the entire width of the viewport. It fluidly adapts to the screen size, making it suitable for creating full-width sections. Here’s an example:

<div class="container-fluid">
  <!-- Content goes here -->
</div>

By default, both .container and .container-fluid have padding on the left and right sides to create spacing around the content. You can add additional classes like .p-4 to adjust the padding if needed.

Containers provide a foundation for building responsive layouts in Bootstrap 5. It’s important to choose the appropriate container type based on your design requirements. The .container class is typically used for content that needs to be contained within a fixed-width container, while the .container-fluid class is used for full-width sections or content that spans the entire viewport.