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

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

Last Updated : 19 Jun, 2024

To write Bootstrap media queries for very large screens, leverage the free, open-source CSS framework to ensure responsive design across various devices, including iPads, tablets, and mobiles. Use Bootstrap's built-in classes and customize properties with media queries to maintain a smooth UI regardless of screen size.

Media Queries for different screen sizes

The table below shows the bootstrap media queries for very large screens

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 example uses media queries and will add a property for background-color for very large screens. 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.

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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
    </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:

responsiv — Output

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

B

bunnyram19

Improve

Article Tags :

Similar Reads

Non-linear Components

In electrical circuits, Non-linear Components are electronic devices that need an external power source to operate actively. Non-Linear Components are those that are changed with respect to the voltage and current. Elements that do not follow ohm's law are called Non-linear Components. Non-linear Co

Spring Boot Tutorial

Spring Boot is a Java framework that makes it easier to create and run Java applications. It simplifies the configuration and setup process, allowing developers to focus more on writing code for their applications. This Spring Boot Tutorial is a comprehensive guide that covers both basic and advance

Class Diagram | Unified Modeling Language (UML)

A UML class diagram is a visual tool that represents the structure of a system by showing its classes, attributes, methods, and the relationships between them. It helps everyone involved in a projectâ€”like developers and designersâ€”understand how the system is organized and how its components interact

Backpropagation in Neural Network

Back Propagation is also known as "Backward Propagation of Errors" is a method used to train neural network . Its goal is to reduce the difference between the modelâ€™s predicted output and the actual output by adjusting the weights and biases in the network.It works iteratively to adjust weights and

3-Phase Inverter

An inverter is a fundamental electrical device designed primarily for the conversion of direct current into alternating current . This versatile device , also known as a variable frequency drive , plays a vital role in a wide range of applications , including variable frequency drives and high power

Polymorphism in Java

Polymorphism in Java is one of the core concepts in object-oriented programming (OOP) that allows objects to behave differently based on their specific class type. The word polymorphism means having many forms, and it comes from the Greek words poly (many) and morph (forms), this means one entity ca

In SQL, a Common Table Expression (CTE) is an essential tool for simplifying complex queries and making them more readable. By defining temporary result sets that can be referenced multiple times, a CTE in SQL allows developers to break down complicated logic into manageable parts. CTEs help with hi

What is Vacuum Circuit Breaker?

A vacuum circuit breaker is a type of breaker that utilizes a vacuum as the medium to extinguish electrical arcs. Within this circuit breaker, there is a vacuum interrupter that houses the stationary and mobile contacts in a permanently sealed enclosure. When the contacts are separated in a high vac

Python Variables

In Python, variables are used to store data that can be referenced and manipulated during program execution. A variable is essentially a name that is assigned to a value. Unlike many other programming languages, Python variables do not require explicit declaration of type. The type of the variable i

Spring Boot Interview Questions and Answers

Spring Boot is a Java-based framework used to develop stand-alone, production-ready applications with minimal configuration. Introduced by Pivotal in 2014, it simplifies the development of Spring applications by offering embedded servers, auto-configuration, and fast startup. Many top companies, inc