How to create full width container in bootstrap5? Last Updated : 10 Sep, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report 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: html <!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> Output: Comment More infoAdvertise with us Next Article How to create Flex Box Container with Scrollable Content in Bootstrap 5? R riyakalra59 Follow Improve Article Tags : Bootstrap Bootstrap-Misc Similar Reads How to create full width container using bootstrap? Bootstrap offers two types of containers: fixed-width containers and full-width, fluid containers. The container-fluid class is used to create a full-width container that spans the entire width of the viewport, adjusting dynamically as the viewport size changes.Container Types in BootstrapFixed-Widt 3 min read How to create Flex Box Container with Scrollable Content in Bootstrap 5? Bootstrap is a framework that is suitable for mobile-friendly web development. It means the code and the template available on Bootstrap apply to various screen sizes. It is responsive for every screen size.A Flexbox container with scrollable content typically involves using the flex utility classes 3 min read How to create five equal columns in Bootstrap ? In Bootstrap, creating five equal columns means dividing a row into five evenly spaced columns. This can be achieved using the Flexbox-based grid system in Bootstrap 4+. Simply add five col elements inside a row, and Flexbox automatically distributes them equally.Approach:Download the latest Bootstr 2 min read How to stretch flexbox to fill the entire container in Bootstrap? We are given an HTML document (linked with Bootstrap) with a flexbox and a container. The goal is to stretch the flexbox to fill the entire container. Table of Content Using Bootstrap flex-fill classUsing Bootstrap's flex-grow ClassUsing Bootstrap flex-fill classThe .flex-fill class stretches the wi 3 min read How to Create a Multi-Column Footer in Bootstrap ? Bootstrap offers a range of classes that can be employed to design web pages and apply diverse styles. Footers are a crucial element of web design, as they provide users with valuable information and navigation options. With Bootstrap, creating a multi-column footer that is visually appealing and re 3 min read Bootstrap5 Containers Fluid containers 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> 2 min read Like