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.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Responsive Div</title> 
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1" /> 
  
        <link rel="stylesheet" 
              href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> 
    </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= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
      </script> 
  
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> 
      </script> 
  
        <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 
      </script> 
    </body> 
</html> 