Bootstrap – Containers
Bootstrap containers are a fundamental part of Bootstrap’s layout system. They are used to contain and align the content within a responsive, fixed-width, or fluid-width layout. Containers are essential for creating a grid system in Bootstrap.
There are three types of containers in Bootstrap:
.container.container-fluid- Responsive containers (e.g.,
.container-sm,.container-md,.container-lg,.container-xl,.container-xxl)
1. .container
The .container class creates a responsive fixed-width container. The width of this container varies based on the viewport size, ensuring the content is centered on the page with some margin on either side.
<div class="container">
<!-- Content here will be centered and have responsive margins -->
</div>2. .container-fluid
The .container-fluid class creates a full-width container that spans the entire width of the viewport, regardless of its size.
<div class="container-fluid">
<!-- Content here will span the entire width of the viewport -->
</div>3. Responsive Containers
Responsive containers allow for varying fixed-widths at different breakpoints. These classes are named based on the breakpoint where they change:
.container-smfor small devices (width ≥ 576px).container-mdfor medium devices (width ≥ 768px).container-lgfor large devices (width ≥ 992px).container-xlfor extra-large devices (width ≥ 1200px).container-xxlfor extra-extra-large devices (width ≥ 1400px)
Here’s an example of a responsive container:
<div class="container-md">
<!-- Content here will have a fixed width on medium devices and larger -->
</div>Example Usage
Here’s an example illustrating the different types of containers:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Containers Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<p>This is a fixed-width container. Its width varies with the viewport size.</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col">
<p>This is a full-width container. It spans the entire width of the viewport.</p>
</div>
</div>
</div>
<div class="container-md">
<div class="row">
<div class="col">
<p>This is a responsive container. It has a fixed width on medium devices and larger.</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>