Open In App

How to create full width container using bootstrap?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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



Last Updated : 05 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads