Bootstrap5 Containers Fluid containers
Last Updated :
07 Dec, 2022
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
Share your thoughts in the comments
Please Login to comment...