Open In App

How to write the bootstrap media queries for very large screens ?

Last Updated : 10 Dec, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap: It is a free open source CSS framework that is used to build responsive websites i.e., the UI will not distort irrespective of the resolution of the screen size. It might be an iPad, tablet, mobile, or any other device the website functions in a smooth way. In order to achieve this objective, we can use the in-built classes of the framework and we can also customize the class properties using media queries. Below there is a table that enumerates all the media query breakpoints.

Device Type min-width in px
Small Devices like mobiles 576px
Medium Devices like tablets 768px
Large devices like Desktops 992px
Very large or Extra large devices like large desktops 1200px

Example: The following example uses media queries and will add a property for background-color for very large screens.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, 
        initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
  
    <style>
        @media screen and (min-width: 1200px) {
            body {
                background-color: #bedcfa;
                color: black;
            }
        }
    </style>
</head>
  
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <h3>Column 1</h3>
                <p>
                    HTML stands for HyperText Markup 
                    Language. It is used to design 
                    web pages using a markup language.
                    HTML is the combination of 
                    Hypertext and Markup language.
                    Hypertext defines the link between 
                    the web pages. A markup language 
                    is used to define the text document
                    within tag which defines the 
                    structure of web pages. HTML is a 
                    markup language that is used by 
                    the browser to manipulate text, 
                    images, and other content to
                    display it in the required format.
                </p>
            </div>
  
            <div class="col-sm-6">
                <h3>Column 2</h3>
                <p>
                    The term PHP is an acronym for PHP:
                    Hypertext Preprocessor. PHP is a 
                    server-side scripting language 
                    designed specifically for web 
                    development. PHP can be easily 
                    embedded in HTML files and HTML 
                    codes can also be written in a PHP 
                    file. The thing that differentiates 
                    PHP with client-side language like 
                    HTML is,PHP codes are executed on 
                    the server whereas HTML codes are 
                    directly rendered on the browser.
                </p>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Observation: If the screen size is more than 1200px then the background-color is the above one and if the resolution is less then 1200px then its background-color will be none.



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads