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:
Share your thoughts in the comments
Please Login to comment...