Skip to content
Related Articles

Related Articles

How to create responsive website zoomed out to full width on mobile using Bootstrap?
  • Last Updated : 03 Jun, 2020

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
Recommended Articles
Page :