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.
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.