Bootstrap 5 Containers

Containers are used to pad the content inside of them, and there are two container classes available:

1. The .container class provides a responsive fixed width container
2. The .container-fluid class provides a full width container, spanning the entire width of the viewport

Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.

Bootstrap Fixed Container

Use the .container class to create responsive, fixed-width container.

note that its width (max-width) will change on different screen sizes.

Example:
<div class="container">
<h1>welcome to soopro pathshala</h1>
<p>This is my first bootstarp page.</p>
</div>

Bootstarp Fluid Container

Use the .container-fluid class to create a full width container, that will always span the entire width of the screen (width is always 100%):

Example:
<div class="container-fluid">
<h1>Welcome to soopro pathshala</h1>
<p>Example of bootstrap fluid container.</p>
</div>

Container padding

By default, containers have left and right padding, with no top or bottom padding. Therefore, we often use spacing utilities, such as extra padding and margins to make them look even better. For example, .pt-5 means "add a large top padding":

Example:
<div class="container pt-5"></div>

Here are key points about Bootstrap containers.

1. Definition:

• Containers are fundamental building blocks in Bootstrap that are used to create a responsive and fixed-width layout.

2. Types of containers:

• .container: This is fixed-width container that adjusts its width based on the current screen size.
• .container-fluid: This is a full-width container that spans the entire width of the viewport, regardless of the screen size.
• .container-{breakpoint}:These are responsive containers that are fixed-width until a specified breakpoint is reached, after which they become fluid.

3. Usage

• Containers are used to center and horizontally pad the content within the page. Every row and column in the bootstrap gid system must be placed inside a container.

4. Responsive Design:

• Containers play a crucial role in making layouts responsive. By adjusting their width at various breakpoints, they ensure content looks good on all devices, from mobile phones to large desktops.

5. Padding and Alignment:

• Bootstrap containers automatically include padding to ensure proper spacing and alignment of content.

6. Nesting:

• Containers can be nested inside each other to create more complex layouts, but generally, the outermost container defines the primary layout structure.