Skip to content

Instantly share code, notes, and snippets.

@iammart
Forked from akolinski/media-queries-b3.scss
Created July 17, 2018 08:02
Show Gist options
  • Save iammart/de067a84341926bf28cdf4a1261ba3a7 to your computer and use it in GitHub Desktop.
Save iammart/de067a84341926bf28cdf4a1261ba3a7 to your computer and use it in GitHub Desktop.
Media queries using SCSS in Bootstrap 3
// Using bootstrap the SASS way. Import your variables.
@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables";
/* http://getbootstrap.com/css/#responsive-utilities */
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
// Mobile first
body{
border: solid 4px red;
}
// Very small devices (tablets, 480px and up)
@media (min-width: $screen-xs-min) {
body{
border: solid 4px pink;
}
}
// Small devices (tablets, 768px and up)
@media (min-width: $screen-sm-min) {
body{
border: solid 4px orange;
}
}
// Medium devices (desktops, 992px and up)
@media (min-width: $screen-md-min) {
body{
border: solid 4px green;
}
}
// Large devices (large desktops, 1200px and up)
@media (min-width: $screen-lg-min) {
body{
border: solid 4px yellow;
}
}
/* We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices. */
// 0 and up 768px
@media (max-width: $screen-xs-max) {
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
}
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment