How to create full width container in bootstrap5?

Last Updated : 10 Sep, 2020

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> 