How to create full width container using bootstrap?

05 May, 2022
We can create full width container using “container-fluid” class of bootstrap
Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time). container-fluid class can be used to get full width container.
container-fluid class provides a full-width container which spans the entire width of the viewport. In the below example, the div with class “container-fluid” will take-up the complete width of the viewport and will expand or shrink when ever the viewport is resized.
Method:
Basically we have to create a <div></div> (not necessary to be a div but it’s better if we use div) to which we have to give a class container-fluid(or container depends, upon the width) and put all the text inside that div which we want collectively to be in a container
Syntax:
.container- max-width changes at each breakpoint
<div class=”container”> <!– Content here –> </div>
.container-fluid- 100% width
<div class="container-fluid">

        <!-- Content here -->

  </div>
Example: 
HTML
<!DOCTYPE html><html lang="en"><head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width,            initial-scale=1, shrink-to-fit=no">    <!-- Bootstrap CSS -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"        crossorigin="anonymous">    <script src="https://kit.fontawesome.com/577845f6a5.js"        crossorigin="anonymous">    </script>    <title>Use of class container</title>    <style type="text/css">        .bottom-left {            left: 0;        }    </style></head><body>    <!--class container: max-width             changes at each breakpoint       All the text is pushed inside a container-->    <div class="container">        <!--class jumbotron: to highlight               how the class container works-->        <div class="jumbotron">            <h1 style="color: #006400;">                GeeksforGeeks            </h1>            <div>                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200712114621/testimg.JPG"                    height="150">            </div>            <div class="position-relative"                style="color: green;">                <h1>Hey There..!!</h1>                 <p><b>This is an Example..</b></p>                  <p>                    Here I have used class container                    of bootstrap to put                    everything inside a container.                </p>                 <br/>            </div>            <div class="position-relative">                <div class="position-absolute bottom-left">                    <button type="button"                        class="btn btn-success">                        Click me!                    </button>                </div>            </div>        </div>    </div></body></html>
image showing class container
Here, class container is used inside  the top div tag to confine all the text inside a container whose width is fixed
Example: 
HTML
<!DOCTYPE html><html lang="en"><head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width,            initial-scale=1, shrink-to-fit=no">    <!-- Bootstrap CSS -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"        crossorigin="anonymous">    <script src="https://kit.fontawesome.com/577845f6a5.js"        crossorigin="anonymous">    </script>    <title>Use of class container-fluid</title>    <style type="text/css">        .bottom-left {            left: 0;        }    </style></head><body>    <!--class container-fluid: 100% width-->    <div class="container-fluid">        <!--class jumbotron: to highlight              how the class container works-->        <div class="jumbotron">            <h1 style="color: #006400;">                GeeksforGeeks            </h1>            <div>                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200712114621/testimg.JPG"                    height="150">            </div>            <div class="position-relative"                style="color: green;">                <h1>Hey There..!!</h1>                 <p><b>This is an Example..</b></p>                  <p>                    Here I have used class                    container-fluid of bootstrap                    to put everything inside a                    container.                </p>                 <br/>            </div>            <div class="position-relative">                <div class="position-absolute bottom-left">                    <button type="button"                        class="btn btn-success">                        Click me!                    </button>                </div>            </div>        </div>    </div></body></html>
Output:
image showing class container-fluid
Here class container-fluid is used to confine all the text in a container whose width is 10% of the screen
sumitgumber28
sahilintern
Bootstrap-Misc
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to Show Images on Click using HTML ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?