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.



Similar Reads

How to Make the Navbar Collapse on Smaller Screens in React Bootstrap ?
Earlier, websites were mainly designed for desktop computers because that's what most people used. But now, with so many devices that can access the internet, websites need to be responsive on all sorts of screen sizes and types. So, In this article, we will see how to make Navbar collapse on a smaller screen using libraries like React-Bootstrap. P
3 min read
How to make columns stack vertically on smaller screens in React Bootstrap?
In the article, we used different components like rows, columns, etc. to display and deliver the information to the user. However, on smaller screen devices, there is an issue with the representation of these components. So, to handle the columns on the smaller screens, we can use grid classes and FlexBox classes provided by React Bootstrap. Table
3 min read
Bootstrap | Media queries
We use a handful of media queries for delivering different styles sheet to different devices, to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes. Bootstrap primarily uses the following media query ranges—or breakpoints
2 min read
Bootstrap Breakpoints Media queries
Bootstrap Breakpoints utilize media queries to apply CSS styles based on screen size. These breakpoints include min-width, max-width, single breakpoint targeting, and range targeting for various viewport sizes, ensuring responsive design and layout consistency. ConceptDescriptionMin-widthCSS applied to devices wider than min-width.Max-widthCSS appl
3 min read
How to cover the whole screen when the hamburger menu is pressed on smaller screens?
Bootstrap provides a class to overlay the content and different style properties to make it appear more attractive. To fill the viewport or whole screen with .nav-bar change the height. .navbar-nav{ min-height: 100vh; } Example: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, init
2 min read
How to pass value between Screens in React Native ?
React Native is use to create cross-platform applications. One of the biggest drawbacks of React Native is that it doesn't come with any built-in navigation system. We have to use other libraries to implement navigation in React Native. React Navigation library is widely used with React Native to implement various types of navigation systems. With
4 min read
Foundation CSS Off-canvas Reveal on Larger Screens
Foundation CSS is a free, open-source front-end framework for generating flexible web designs. With a responsive grid, HTML and CSS UI components, templates, and more, it's one of the most powerful CSS frameworks. It also contains a number of JavaScript Extension capabilities that may be turned on or off. It also renders quickly on mobile devices t
4 min read
How to make an Element Visible only on Larger Screens in Tailwind CSS ?
In Tailwind CSS, you can use the responsive utility classes to control the visibility of an element based on screen size. To make an element visible only on larger screens, you can use the hidden and block classes with responsive breakpoints. We can achieve the effect of visibility of an element only on larger screens in Tailwind CSS in many ways i
2 min read
What is the difference between “screen” and “only screen” in media queries?
Media query is used to create responsive web design. It means that the view of web page differ from system to system based on screen or media types. screen: It is used to set the screen size of media query. The screen size can be set by using max-width and min-width. The screen size is differ from screen to screen. Syntax: @media screen and (max-wi
2 min read
How to use Sass Variables with CSS3 Media Queries ?
SASS Variables: SASS Variables are very simple to understand and use. SASS Variables assign a value to a name that begins with $ sign, and then just refer to that name instead of the value. Despite this, they are one of the most useful tools SASS provides. SASS Variables provide the following features: Reduce repetitionDo complex mathematicsConfigu
3 min read