How to write the bootstrap media queries for very large screens ?
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.
Please Login to comment...