Bootstrap 3 breakpoints and media queries
Twitter BootstrapTwitter Bootstrap-3Media QueriesBreakpointsTwitter Bootstrap Problem Overview
On the Bootstrap 3 media queries documentation it says:
> We use the following media queries in our Less files to create the key breakpoints in our grid system.
>
> Extra small devices (phones, less than 768px):
> No media query since this is the default in Bootstrap
>
> 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) { ... }
Are we supposed to be able to use the @screen-sm, @screen-md, and @screen-lg names in our media queries as well? Because it doesn't work for me. I have to use pixel measurements such as @media (min-width: 768px) {...} before it will work. Am I doing something wrong?
Also, is the reference to 480px for extra small devices a typo? Shouldn't that say up to 767px? (since removed from the documentation)
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
Bootstrap 4 Media Queries
// Extra small devices (portrait phones, less than 576px)
// No media query 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) { ... }
Bootstrap 4 provides source CSS in Sass that you can include via Sass Mixins:
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
// Example usage:
@include media-breakpoint-up(sm) {
.some-class {
display: block;
}
}
Bootstrap 3 Media Queries
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
Bootstrap 2.3.2 Media Queries
@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) {
}
Resource from : https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries
Solution 2 - Twitter Bootstrap
Bootstrap does not document the media queries very well. Those variables of @screen-sm, @screen-md, @screen-lg are actually referring to LESS variables and not simple CSS.
When you customize Bootstrap you can change the media query breakpoints and when it compiles the @screen-xx variables are changed to whatever pixel width you defined as screen-xx. This is how a framework like this can be coded once and then customized by the end user to fit their needs.
A similar question on here that might provide more clarity: https://stackoverflow.com/questions/18796505/bootstrap-3-0-media-queries
In your CSS, you will still have to use traditional media queries to override or add to what Bootstrap is doing.
In regards to your second question, that is not a typo. Once the screen goes below 768px the framework becomes completely fluid and resizes at any device width, removing the need for breakpoints. The breakpoint at 480px exists because there are specific changes that occur to the layout for mobile optimization.
To see this in action, go to this example on their site (http://getbootstrap.com/examples/navbar-fixed-top/), and resize your window to see how it treats the design after 768px.
Solution 3 - Twitter Bootstrap
This issue has been discussed in https://github.com/twbs/bootstrap/issues/10203 By now, there is no plan to change Grid because compatibility reasons.
You can get Bootstrap from this fork, branch hs: https://github.com/antespi/bootstrap/tree/hs
This branch give you an extra breakpoint at 480px, so yo have to:
- Design for mobile first (XS, less than 480px)
- Add HS (Horizontal Small Devices) classes in your HTML: col-hs-*, visible-hs, ... and design for horizontal mobile devices (HS, less than 768px)
- Design for tablet devices (SM, less than 992px)
- Design for desktop devices (MD, less than 1200px)
- Design for large devices (LG, more than 1200px)
Design mobile first is the key to understand Bootstrap 3. This is the major change from BootStrap 2.x. As a rule template you can follow this (in LESS):
.template {
/* rules for mobile vertical (< 480) */
@media (min-width: @screen-hs-min) {
/* rules for mobile horizontal (480 > 768) */
}
@media (min-width: @screen-sm-min) {
/* rules for tablet (768 > 992) */
}
@media (min-width: @screen-md-min) {
/* rules for desktop (992 > 1200) */
}
@media (min-width: @screen-lg-min) {
/* rules for large (> 1200) */
}
}
Solution 4 - Twitter Bootstrap
I know this is a bit old, but i thought i would contribute. Basing myself on the answer by @Sophy, this is what I did to add a .xxs breakpoint. I have not taken care of visible-inline, table.visible, etc classes.
/*========== Mobile First Method ==========*/
.col-xxs-12, .col-xxs-11, .col-xxs-10, .col-xxs-9, .col-xxs-8, .col-xxs-7, .col-xxs-6, .col-xxs-5, .col-xxs-4, .col-xxs-3, .col-xxs-2, .col-xxs-1 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
float: left;
}
.visible-xxs {
display:none !important;
}
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (max-width:479px) {
.visible-xxs {
display: block !important;
}
.visible-xs {
display:none !important;
}
.hidden-xs {
display:block !important;
}
.hidden-xxs {
display:none !important;
}
.col-xxs-12 {
width: 100%;
}
.col-xxs-11 {
width: 91.66666667%;
}
.col-xxs-10 {
width: 83.33333333%;
}
.col-xxs-9 {
width: 75%;
}
.col-xxs-8 {
width: 66.66666667%;
}
.col-xxs-7 {
width: 58.33333333%;
}
.col-xxs-6 {
width: 50%;
}
.col-xxs-5 {
width: 41.66666667%;
}
.col-xxs-4 {
width: 33.33333333%;
}
.col-xxs-3 {
width: 25%;
}
.col-xxs-2 {
width: 16.66666667%;
}
.col-xxs-1 {
width: 8.33333333%;
}
.col-xxs-pull-12 {
right: 100%;
}
.col-xxs-pull-11 {
right: 91.66666667%;
}
.col-xxs-pull-10 {
right: 83.33333333%;
}
.col-xxs-pull-9 {
right: 75%;
}
.col-xxs-pull-8 {
right: 66.66666667%;
}
.col-xxs-pull-7 {
right: 58.33333333%;
}
.col-xxs-pull-6 {
right: 50%;
}
.col-xxs-pull-5 {
right: 41.66666667%;
}
.col-xxs-pull-4 {
right: 33.33333333%;
}
.col-xxs-pull-3 {
right: 25%;
}
.col-xxs-pull-2 {
right: 16.66666667%;
}
.col-xxs-pull-1 {
right: 8.33333333%;
}
.col-xxs-pull-0 {
right: auto;
}
.col-xxs-push-12 {
left: 100%;
}
.col-xxs-push-11 {
left: 91.66666667%;
}
.col-xxs-push-10 {
left: 83.33333333%;
}
.col-xxs-push-9 {
left: 75%;
}
.col-xxs-push-8 {
left: 66.66666667%;
}
.col-xxs-push-7 {
left: 58.33333333%;
}
.col-xxs-push-6 {
left: 50%;
}
.col-xxs-push-5 {
left: 41.66666667%;
}
.col-xxs-push-4 {
left: 33.33333333%;
}
.col-xxs-push-3 {
left: 25%;
}
.col-xxs-push-2 {
left: 16.66666667%;
}
.col-xxs-push-1 {
left: 8.33333333%;
}
.col-xxs-push-0 {
left: auto;
}
.col-xxs-offset-12 {
margin-left: 100%;
}
.col-xxs-offset-11 {
margin-left: 91.66666667%;
}
.col-xxs-offset-10 {
margin-left: 83.33333333%;
}
.col-xxs-offset-9 {
margin-left: 75%;
}
.col-xxs-offset-8 {
margin-left: 66.66666667%;
}
.col-xxs-offset-7 {
margin-left: 58.33333333%;
}
.col-xxs-offset-6 {
margin-left: 50%;
}
.col-xxs-offset-5 {
margin-left: 41.66666667%;
}
.col-xxs-offset-4 {
margin-left: 33.33333333%;
}
.col-xxs-offset-3 {
margin-left: 25%;
}
.col-xxs-offset-2 {
margin-left: 16.66666667%;
}
.col-xxs-offset-1 {
margin-left: 8.33333333%;
}
.col-xxs-offset-0 {
margin-left: 0%;
}
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
.visible-xs {
display:block !important;
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
.visible-xs {
display:none !important;
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
Solution 5 - Twitter Bootstrap
The reference to 480px has been removed. Instead it says:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
There isn't a breakpoint below 768px in Bootstrap 3.
If you want to use the @screen-sm-min and other mixins then you need to be compiling with LESS, see http://getbootstrap.com/css/#grid-less
Here's a tutorial on how to use Bootstrap 3 and LESS: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
Solution 6 - Twitter Bootstrap
You should be able to use those breakpoints if you use http://lesscss.org/ to build your CSS.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* 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) { }
From https://getbootstrap.com/docs/3.4/css/#grid-media-queries
In fact @screen-sm-min is a variable than is replaced by the value specified in _variable when building with Less. If you don't use Less, you can replace this variable by the value:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { }
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { }
Bootstrap 3 officially supports Sass: https://github.com/twbs/bootstrap-sass. If you are using Sass (and you should) the syntax is a bit different.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* 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) { }
Solution 7 - Twitter Bootstrap
Here are the selectors used in Bootstrap 4. 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){}
Solution 8 - Twitter Bootstrap
for bootstrap 3 I have the following code in my navbar component
/**
* Navbar styling.
*/
@mobile: ~"screen and (max-width: @{screen-xs-max})";
@tablet: ~"screen and (min-width: @{screen-sm-min})";
@normal: ~"screen and (min-width: @{screen-md-min})";
@wide: ~"screen and (min-width: @{screen-lg-min})";
@grid-breakpoint: ~"screen and (min-width: @{grid-float-breakpoint})";
then you can use something like
@media wide { selector: style }
This uses whatever value you have the variables set to.
Escaping allows you to use any arbitrary string as property or variable value. Anything inside ~"anything" or ~'anything' is used as is with no changes except interpolation.
Solution 9 - Twitter Bootstrap
In order to work with the mixins of the Bootstrap 4 in parallel in a project that relies on an older Bootstrap version, you can try to install both with an alias via npm:
npm i bootstrap-3@npm:bootstrap-sass@\^3 bootstrap-4@npm:bootstrap@\^4 bootstrap-5@npm:bootstrap@\^5 bootstrap
Attention: This command installs version 3,4,5 and also latest. Adapt if if 3 and 4 are just needed! For reasons of space I use the node_modules via symlink and I need all of them across projects :-)
And then get the part you need:
// Bootstrap 3
@import '../../../node_modules/bootstrap-3/assets/stylesheets/_bootstrap.scss';
// Extend: Bootstrap 4 Media Queries
@import "../../../node_modules/bootstrap-4/scss/_functions.scss";
@import "../../../node_modules/bootstrap-4/scss/_variables.scss";
@import '../../../node_modules/bootstrap-4/scss/mixins/_breakpoints.scss';
Adjust the path of course!
And if anything works, you can now use:
@include media-breakpoint-up(sm) {}
in Bootstrap 3.
Otherwise replace the mixins with search / replace with the px.
Solution 10 - Twitter Bootstrap
Bootstrap 4 media query attached with example
@media (min-width: 576px) {
.responsive{
color:red
}
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
.responsive{
color:orange
}
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
.responsive{
color:blue
}
}
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
.responsive{
color:green
}
}
<h2>Bootstrao 4 </h2>
<div class="responsive"> see colour herer</div>
Solution 11 - Twitter Bootstrap
@media screen and (max-width: 767px) {
}
@media screen and (min-width: 768px) and (max-width: 991px){
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){
}
@media screen and (min-width: 992px) {
}