How to create full width container using bootstrap?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
              integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 
              crossorigin="anonymous" />
        <script src=
                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=
                         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>

chevron_right


Here, class container is used inside  the top div tag to confine all the text inside a container whose width is fixed

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
              integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
              crossorigin="anonymous" />
        <script src=
                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=
                         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>

chevron_right


Output:

Here class container-fluid is used to confine all the text in a container whose width is 10% of the screen




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.