Skip to content
Related Articles

Related Articles

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=
              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>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :