Menu
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) { ... }
Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.
// 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;
}
}
/*========== 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) {
}
@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
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: 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.
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 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) */
}
}
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) {
}
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
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) { }
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){}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With