Bootstrap 5 Fluid Containers are used to make containers that span the entire width of the screen i.e. they span the entire width of the viewport.
Containers Fluid Containers Class:
- container-fluid: This class is used to make a fluid container.
Syntax:
<div class="container-fluid">
...
</div>
Example 1: In this example, we use the alert element to show how the fluid container takes up space in comparison to the normal container.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Containers Fluid Container</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="mt-4">
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>
Bootstrap 5 Containers Fluid Container
</strong>
</div>
</div>
<div class="container">
<div class="alert alert-danger mt-4"
role="alert">
This is an alert inside the normal container.
The container have some padding around it and
does not take whole viewport port.
</div>
</div>
<div class="container-fluid">
<div class="alert alert-success mt-4"
role="alert">
This is an alert inside the fluid container.
This takes up the whole viewport width.
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we used the card element to show how the fluid container reacts for responsive screens.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Containers Fluid Container</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="mt-4">
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>
Bootstrap 5 Containers Fluid Container
</strong>
</div>
</div>
<div class="container bg-dark">
<div class="row mt-4">
<div class="col">
<div class="card text-bg-info">
<div class="card-header">
<h5>
Card 1
</h5>
</div>
<div class="card-body">
This card is inside the
normal container.
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-secondary">
<div class="card-header">
<h5>
Card 2
</h5>
</div>
<div class="card-body">
This card is inside the
normal container.
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-primary">
<div class="card-header">
<h5>
Card 3
</h5>
</div>
<div class="card-body">
This card is inside
the normal container.
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid bg-secondary">
<div class="row mt-4">
<div class="col">
<div class="card text-bg-success">
<div class="card-header">
<h5>Card 1</h5>
</div>
<div class="card-body">
This card is inside
the fluid container.
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-warning">
<div class="card-header">
<h5>
Card 1
</h5>
</div>
<div class="card-body">
This card is inside
the fluid container.
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-danger">
<div class="card-header">
<h5>
Card 1
</h5>
</div>
<div class="card-body">
This card is inside
the fluid container.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.2/layout/containers/#fluid-containers
