Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
  • Last Updated : 10 Dec, 2020
Improve Article
Save Article

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 Typemin-width in px
Small Devices like mobiles576px
Medium Devices like tablets768px
Large devices like Desktops992px
Very large or Extra large devices like large desktops1200px

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


<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, 
    <link rel="stylesheet" href=
    <script src=
    <script src=
    <script src=
        @media screen and (min-width: 1200px) {
            body {
                background-color: #bedcfa;
                color: black;
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <h3>Column 1</h3>
                    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.
            <div class="col-sm-6">
                <h3>Column 2</h3>
                    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.


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.

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!