Open In App

Bootstrap5 Containers Fluid containers

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 07 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads