Twitter Bootstrap 3: how to use media queries?
CssTwitter BootstrapMedia QueriesCss Problem Overview
I'm using Bootstrap 3 to build a responsive layout where I want to adjust a few font sizes according to the screen size. How can I use media queries to make this kind of logic?
Css Solutions
Solution 1 - Css
Bootstrap 3
Here are the selectors used in BS3, if you want to stay consistent:
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Note: FYI, this may be useful for debugging:
<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>
Bootstrap 4
Here are the selectors used in BS4. There is no "lowest" setting in BS4 because "extra small" is the default. I.e. you would first code the XS size and then have these media overrides afterwards.
@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Bootstrap 5
@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
@media(min-width:1400px){}
Update 2021-05-20: Info is still accurate as of versions 3.4.1, 4.6.0, 5.0.0.
Solution 2 - Css
Based on bisio's answer and the Bootstrap 3 code, I was able to come up with a more accurate answer for anyone just looking to copy and paste the complete media query set into their stylesheet:
/* Large desktops and laptops */
@media (min-width: 1200px) {
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
}
/* Portrait phones and smaller */
@media (max-width: 480px) {
}
Solution 3 - Css
If you're using LESS or SCSS/SASS and you're using a LESS/SCSS version of Bootstrap, you can use variables as well, provided you have access to them. A LESS translation of @full-decent's answer would be as follows:
@media(max-width: @screen-xs-max){}
@media(min-width: @screen-sm-min){} /* deprecated: @screen-tablet, or @screen-sm */
@media(min-width: @screen-md-min){} /* deprecated: @screen-desktop, or @screen-md */
@media(min-width: @screen-lg-min){} /* deprecated: @screen-lg-desktop, or @screen-lg */
There are also variables for @screen-sm-max and @screen-md-max, which are 1 pixel less than @screen-md-min and @screen-lg-min, respectively, typically for use with @media(max-width).
EDIT: If you're using SCSS/SASS, variables start with a $ instead of a @, so it'd be $screen-xs-max etc.
Solution 4 - Css
These are the values from Bootstrap3:
/* Extra Small */
@media(max-width:767px){}
/* Small */
@media(min-width:768px) and (max-width:991px){}
/* Medium */
@media(min-width:992px) and (max-width:1199px){}
/* Large */
@media(min-width:1200px){}
Solution 5 - Css
Here are two examples.
Once the viewport becomes 700px wide or less make all h1 tags 20px.
@media screen and ( max-width: 700px ) {
h1 {
font-size: 20px;
}
}
Make all the h1's 20px until the viewport reaches 700px or larger.
@media screen and ( min-width: 700px ) {
h1 {
font-size: 20px;
}
}
Hope this helps :0)
Solution 6 - Css
Bootstrap 3
For the final version release of Bootstrap 3 (v3.4.1) the following media queries were used which corresponds with the documentation that outlines the responsive classes that are available. https://getbootstrap.com/docs/3.4/css/#responsive-utilities
/* Extra Small Devices, .visible-xs-* */
@media (max-width: 767px) {}
/* Small Devices, .visible-sm-* */
@media (min-width: 768px) and (max-width: 991px) {}
/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {}
/* Large Devices, .visible-lg-* */
@media (min-width: 1200px) {}
Media queries extracted from the Bootstrap GitHub repository from the following less files:-
https://github.com/twbs/bootstrap/blob/v3.4.1/less/variables.less#L283 https://github.com/twbs/bootstrap/blob/v3.4.1/less/responsive-utilities.less
Bootstrap 5
From the documentation for version 5 you can see the media query breakpoints have been updated since version 3 to better fit modern device dimensions.
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
Source: Bootstrap 5 Documentation
You can see the breakpoints for v5.1.3 in the Bootstrap GitHub repository:-
https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_variables.scss#L461 https://github.com/twbs/bootstrap/blob/v5.1.3/scss/mixins/_breakpoints.scss
Updated on 2021-12-19
Solution 7 - Css
Here is a more modular example using LESS to mimic Bootstrap without importing the less files.
@screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-md-max: 1199px;
@screen-lg-min: 1200px;
//xs only
@media(max-width: @screen-xs-max) {
}
//small and up
@media(min-width: @screen-sm-min) {
}
//sm only
@media(min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
}
//md and up
@media(min-width: @screen-md-min) {
}
//md only
@media(min-width: @screen-md-min) and (max-width: @screen-md-max) {
}
//lg and up
@media(min-width: @screen-lg-min) {
}
Solution 8 - Css
Based on the other users' answers, I wrote these custom mixins for easier usage:
Less input
.when-xs(@rules) { @media (max-width: @screen-xs-max) { @rules(); } }
.when-sm(@rules) { @media (min-width: @screen-sm-min) { @rules(); } }
.when-md(@rules) { @media (min-width: @screen-md-min) { @rules(); } }
.when-lg(@rules) { @media (min-width: @screen-lg-min) { @rules(); } }
Example usage
body {
.when-lg({
background-color: red;
});
}
SCSS input
@mixin when-xs() { @media (max-width: $screen-xs-max) { @content; } }
@mixin when-sm() { @media (min-width: $screen-sm-min) { @content; } }
@mixin when-md() { @media (min-width: $screen-md-min) { @content; } }
@mixin when-lg() { @media (min-width: $screen-lg-min) { @content; } }
Example usage:
body {
@include when-md {
background-color: red;
}
}
Output
@media (min-width:1200px) {
body {
background-color: red;
}
}
Solution 9 - Css
##Or simple Sass-Compass:
@mixin col-xs() {
@media (max-width: 767px) {
@content;
}
}
@mixin col-sm() {
@media (min-width: 768px) and (max-width: 991px) {
@content;
}
}
@mixin col-md() {
@media (min-width: 992px) and (max-width: 1199px) {
@content;
}
}
@mixin col-lg() {
@media (min-width: 1200px) {
@content;
}
}
##Example:
#content-box {
@include border-radius(18px);
@include adjust-font-size-to(18pt);
padding:20px;
border:1px solid red;
@include col-xs() {
width: 200px;
float: none;
}
}
Solution 10 - Css
keep in mind that avoiding text scaling is the main reason responsive layouts exist. the entire logic behind responsive sites is to create functional layouts that effectively display your content so its easily readable and usable on multiple screen sizes.
Although It is necessary to scale text in some cases, be careful not to miniaturise your site and miss the point.
heres an example anyway.
@media(min-width:1200px){
h1 {font-size:34px}
}
@media(min-width:992px){
h1 {font-size:32px}
}
@media(min-width:768px){
h1 {font-size:28px}
}
@media(max-width:767px){
h1 {font-size:26px}
}
Also keep in mind the 480 viewport has been dropped in bootstrap 3.
Solution 11 - Css
We use the following media queries in our Less files to create the key breakpoints in our grid system.
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
see also on Bootstrap
Solution 12 - Css
> you can see in my example font sizes and background colors are changing according to the screen size
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
/* Custom, iPhone Retina */
@media(max-width:320px){
body {
background-color: lime;
font-size:14px;
}
}
@media only screen and (min-width : 320px) {
body {
background-color: red;
font-size:18px;
}
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
body {
background-color: aqua;
font-size:24px;
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
body {
background-color: green;
font-size:30px;
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
body {
background-color: grey;
font-size:34px;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
body {
background-color: black;
font-size:42px;
}
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is larger than the height, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
Solution 13 - Css
Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
Extra small devices (portrait phones, less than 576px)
No media query for xs since this is the default in Bootstrap
Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Since we write our source CSS in Sass, all our media queries are available via Sass mixins:
No media query necessary for xs breakpoint as it's effectively @media (min-width: 0) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
For understand it deeply please go through below link
Solution 14 - Css
Here is an even easier one stop solution, including separate responsive files based on media queries.
This allows all the media query logic and include logic to only have to exist on one page, the loader. It also allows to not have the media queries clutter up the responsive stylesheets themselves.
//loader.less
// this twbs include adds all bs functionality, including added libraries such as elements.less, and our custom variables
@import '/app/Resources/less/bootstrap.less';
/*
* Our base custom twbs overrides
* (phones, xs, i.e. less than 768px, and up)
* no media query needed for this one since this is the default in Bootstrap
* All styles initially go here. When you need a larger screen override, move those
* overrides to one of the responsive files below
*/
@import 'base.less';
/*
* Our responsive overrides based on our breakpoint vars
*/
@import url("sm-min.less") (min-width: @screen-sm-min); //(tablets, 768px and up)
@import url("md-min.less") (min-width: @screen-md-min); //(desktops, 992px and up)
@import url("large-min.less") (min-width: @screen-lg-min); //(large desktops, 1200px and up)
base.less would look like this
/**
* base.less
* bootstrap overrides
* Extra small devices, phones, less than 768px, and up
* No media query since this is the default in Bootstrap
* all master site styles go here
* place any responsive overrides in the perspective responsive sheets themselves
*/
body{
background-color: @fadedblue;
}
sm-min.less would look like this
/**
* sm-min.less
* min-width: @screen-sm-min
* Small devices (tablets, 768px and up)
*/
body{
background-color: @fadedgreen;
}
your index would just have to load the loader.less
<link rel="stylesheet/less" type="text/css" href="loader.less" />
easy peasy..
Solution 15 - Css
> @media only screen and (max-width : 1200px) {} > > @media only screen and (max-width : 979px) {} > > @media only screen and (max-width : 767px) {} > > @media only screen and (max-width : 480px) {} > > @media only screen and (max-width : 320px) {} > > @media (min-width: 768px) and (max-width: 991px) {} > > @media (min-width: 992px) and (max-width: 1024px) {}
Solution 16 - Css
Use media queries for IE;
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
and (orientation : portrait) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
Solution 17 - Css
:)
In latest bootstrap (4.3.1), using SCSS(SASS) you can use one of @mixin from /bootstrap/scss/mixins/_breakpoints.scss
Media of at least the minimum breakpoint width. No query for the smallest breakpoint. Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
Media of at most the maximum breakpoint width. No query for the largest breakpoint. Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints)
Media that spans multiple breakpoint widths. Makes the @content apply between the min and max breakpoints
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)
Media between the breakpoint's minimum and maximum widths. No minimum for the smallest breakpoint, and no maximum for the largest one. Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints)
For example:
.content__extra {
height: 100%;
img {
margin-right: 0.5rem;
}
@include media-breakpoint-down(xs) {
margin-bottom: 1rem;
}
}
Documentation:
- intro https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints
- migration https://getbootstrap.com/docs/4.3/migration/#responsive-utilities
- variables https://getbootstrap.com/docs/4.3/layout/grid/#variables
Happy coding ;)
Solution 18 - Css
To improve the main response:
You can use the media attribute of the <link> tag (it support media queries) in order to download just the code the user needs.
<link href="style.css" rel="stylesheet">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">
With this, the browser will download all CSS resources, regardless of the media attribute. The difference is that if the media-query of the media attribute is evaluated to false then that .css file and his content will not be render-blocking.
Therefore, it is recommended to use the media attribute in the <link> tag since it guarantees a better user experience.
Here you can read a Google article about this issue https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
Some tools that will help you to automate the separation of your css code in different files according to your media-querys
Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin
PostCSS https://www.npmjs.com/package/postcss-extract-media-query