Bootstrap5 Containers Fluid containers
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.
HTML
<!DOCTYPE html><html lang="en"> <head> <title>Bootstrap 5 Containers Fluid Container</title> <link rel="stylesheet" href=</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.
HTML
<!DOCTYPE html><html lang="en"> <head> <title>Bootstrap 5 Containers Fluid Container</title> <link rel="stylesheet" href=</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
Please Login to comment...