In Bootstrap, a container is a fundamental layout element used to structure the content within a web page. It helps to create a responsive and organized layout by providing a fixed-width container or a fluid-width container,
depending on the class you use. Containers are a key component of the Bootstrap grid system.
There are two main types of containers in Bootstrap:
1.Fixed-Width Container (container class):
The container class creates a responsive fixed-width container.
The container will adapt its width based on the screen size but maintains a fixed maximum width for larger screens.
It is suitable for designs where you want to limit the width of the content and provide a consistent layout.
Container Example:
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
You can click on above box to edit the code and run again.
Output
2.Fluid-Width Container (container-fluid class):
The container-fluid .class creates a full-width, fluid container that spans the entire width of the viewport.
It is suitable for designs where you want the content to extend across the full width of the screen.
Container-Fluid Example:
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
You can click on above box to edit the code and run again.