How to create full width container in bootstrap5?

Bootstrap containers are content holders that are used to align, add margins and padding to your content. Bootstrap has three different container classes, namely:

.container
.container-fluid
.container-{breakpoint}

Width of a container varies in accordance with its class. We can create a full width container in Bootstrap5 using “.container-fluid” class. It sets the container width equal to 100% in all screen sizes. This means the container spans the entire width of the viewport.

Syntax:

<div class= ".container-fluid">
  ...
</div>

Example:

<!DOCTYPE html> 

<html> 

    <head> 

        <link rel="stylesheet"

              href= 
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"

              integrity= 
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"

              crossorigin="anonymous" /> 

        <style> 

            .gfg { 

                background-color: green; 

                color: white; 

                text-align: center; 

            } 

        </style> 

    </head> 

    <body> 

        <div class="container-fluid gfg"> 

            <h2>GeeksforGeeks</h2> 

        </div> 

    </body> 

</html>