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:
The .container class provides a responsive fixed width container
The .container-fluid class provides a full width container, spanning the entire width of the viewport
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.
