Skip to content
Related Articles

Related Articles

How to create full width container using bootstrap?

View Discussion
Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 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=
        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>


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

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!