In Bootstrap 5, containers are used to wrap and center the content within a fixed or responsive width. Containers provide a consistent layout and help maintain proper alignment across different devices and screen sizes. Bootstrap 5 offers two types of containers: `.container` and `.container-fluid`.
1. **`.container`**: The `.container` class creates a fixed-width container that adapts its width based on the user's device or screen size. It provides a responsive layout with a maximum width determined by breakpoints. To use `.container`, wrap your content within a `<div>` element with the `.container` class, like this:
html
<div class="container">
<!-- Content goes here -->
</div>…
2. **`.container-fluid`**: The `.container-fluid` class creates a full-width container that spans the entire width of the viewport. It adjusts its width according to the available screen space without any maximum width restrictions. To use `.container-fluid`, wrap your content within a `<div>` element with the `.container-fluid` class, like this:
html
<div class="container-fluid">
<!-- Content goes here -->
</div>
Here's an example that demonstrates the usage of both containers:
html
<div class="container">
<h1>Fixed-Width Container</h1>
<p>This container has a fixed width and adjusts its layout based on breakpoints.</p>
</div>
<div class="container-fluid">
<h1>Full-Width Container</h1>
<p>This container spans the full width of the viewport without any maximum width restrictions.</p>
</div>
By default, containers in Bootstrap have padding to provide spacing between the content and the container edges. If you want to remove the padding, you can add the `.p-0` class to the container, like this:
html
<div class="container p-0">
<!-- Content goes here -->
</div>
Remember to customize the content within the containers using Bootstrap's grid system, rows, and columns to create responsive layouts and organize your content effectively.
Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.
We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc