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

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: 1200px)
.container {
    max-width: 1140px;}
@media (min-width: 992px)
.container {
    max-width: 960px;
}
@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>
Output:
In Mobile (425 px)
ananya_reddy
Bootstrap-Misc
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to set vertical alignment in Bootstrap ?
How to toggle password visibility in forms using Bootstrap-icons ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?