How to create responsive website zoomed out to full width on mobile using Bootstrap?

Container Classes: This is one of the predefined classes of bootstrap, that contains the entire content of the web-page in it. There are two container classes, namely, container and container-fluid classes. These classes have different properties and one can use the class that fits one’s requirement.

CONTAINER-FLUID: When the content of a web-page is enclosed in a div element having the container-fluid class, all the elements enclosed in the div are filled out to the complete width of the device.

CONTAINER: When the content of a web-page is enclosed in a div element having the container class, all the elements enclosed in the div are not filled out to the complete width of the device. Instead, for every standard screen-size breakpoint, there are media queries predefined.
For Example:

  • @media (min-width: 1200px)
    .container {
        max-width: 1140px;}
  • @media (min-width: 992px)
    .container {
        max-width: 960px;
    }

It is clear that using the container class will provide a certain amount of left and right margin, which is default and different for various screen sizes. But, there is one exception, when the screen size changes from a tablet size to a mobile size, the media query behind the container class is automatically changed, to occupy 100% width of the screen.

  • .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    }

Examples: The following example is of a responsive web-page adapting to the width of the device screen.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Responsive Div</title>
        <meta name="viewport" 
              content="width=device-width,
                       initial-scale=1" />
  
        <link rel="stylesheet" 
              href=
    </head>
    <body>
        <div class="container">
            <center>
                <h1 style="color: green;">
                    Geeks for Geeks
                </h1>
            </center>
            <br />
            <hr />
            <br />
            <h3><u>About:</u></h3>
            GeeksforGeeks.org was created with a goal
          in mind to provide well written, well thought
          and well explained solutions for selected 
          questions. The core team of five super geeks
          constituting of technology lovers and computer
          science enthusiasts have been constantly 
          working in this direction.
            <br />
            <hr />
            <br />
            <h3><u>List of all things available:</u></h3>
            <ul>
                <li>Courses</li>
                <li>Internships</li>
                <li>Coding Practice Platforms</li>
                <li>Company Specific Practice Platforms</li>
                <li>Interview Corner</li>
                <li>Subject Wise Practice Questions</li>
            </ul>
            <center>and all things TECH!</center>
        </div>
        <script src=
      </script>
  
        <script src=
      </script>
  
        <script src=
      </script>
    </body>
</html>

chevron_right


Output:

  • In Mobile (425 px)



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.



Improved By : ananya_reddy

Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.