Bootstrap 4 and Sass Media Queries for Responsive Web Design

Bootstrap 4: Media Queries using Sass

This entry was published on December 7, 2015 and may be out of date.

Bootstrap 4 is currently under construction and will most likely hit the scene very soon. This is a comprehensive rewrite and major changes are being made. There is no definite release date just yet. But before it ships, let us explore some tricks with the new expanded grid framework and media queries.

If you are not yet familiar with Bootstrap 4, start with these:

At the time of writing, Bootstrap 4 is still in alpha and definitely not be ready for production use just yet. This website is built with Bootstrap 4 because I wanted to play with the new framework while it is still baking. While some aspects like the grid seem quite stable, many parts of the framework are very raw. The final release may be will most likely be very different from the alpha. Proceed with caution.

Bootstrap 4 Breakpoints

Bootstrap 4 has moved entirely from pixel based units to relative em/rem based units with the base font-size of 16 pixels. The grid has also been broken down into further divisions.

Understanding the grid breakpoints within Bootstrap 4 is quite important before we move on to our Sass files. My brain is wired for pixel-based layouts and if you’re anything like me, wrapping your head around em values can be difficult. So, here is a neat table which translates em/rem to pixels.

Grid Breakpoint Container Max Width
em px em px
xs 0 0
sm 34em 544px 34rem 544px
md 48em 768px 45rem 720px
lg 62em 992px 60rem 960px
xl 75em 1200px 72.25rem 1156px

Notice how BS4 does not have a lowest value, which means xs is now the default style – and you would use sm, md, lg and xl breakpoints as overrides.

CSS Media Queries

In our traditional approach of making media queries, especially with Bootstrap 3, we would use something like this:

/* Extra small */
@media only screen and (min-width : 480px) {

}

/* Small */
@media only screen and (min-width : 768px) {

}

/* Medium */
@media only screen and (min-width : 992px) {

}

/* Large */
@media only screen and (min-width : 1200px) {

}

Now what our grid system has been completely revamped with em based values, we need to change them as such:

/* Default
 * No @media query for XS is necessary
 */


/* Small. Above 34em (544px) */
@media screen and (min-width: 34em) {

}

/* Medium. Above 48em (768px) */
@media screen and (min-width: 48em) {

}

/* Large. Above 62em (992px) */
@media screen and (min-width: 62em) {

}

/* Extra large. Above 75em (1200px) */
@media screen and (min-width: 75em) {

}

Sassy Media Queries

Before we start using our awesome new Sassy media queries, there is a bit of configuration to be done.

Bootstrap v4-dev

Add Bootstrap from the v4-dev branch to your project. BS4 uses Sass maps to define the breakpoints. Here is the code extracted from _variables.scss:

// Grid breakpoints
//
// Define the minimum and maximum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 34em,
  // Medium screen / tablet
  md: 48em,
  // Large screen / desktop
  lg: 62em,
  // Extra large screen / wide desktop
  xl: 75em
) !default;
If you are not familiar with Sass maps, read Hugo Giraudel’s Using Sass Maps on Sitepoint and/or Tim Hartmann’s An Introduction to Sass Maps: Usage and Examples on TutsPlus.

Include-media

The inline media queries will be handled using include-media, which takes breakpoints as variables and returns @media declarations. I would suggest reading up the documentation.

There is whole bunch of alternatives to include-media, such as Sass-MQ, Breakpoint, sass-mediaqueries and many more. They all do pretty much the same thing. Just pick one and stick with it.

Bower.json

We need to pull the dependencies into our project. I use Bower for convenience but you can also download the requirements and add them to your project manually. My setup in bower.json:

  "dependencies": {
    "bootstrap"     : "4.0.0-alpha",
    "include-media" : "~1.4.2"
  },

Type in bower install to get the latest BS4 and include-media in your bower dependencies folder.

Importing dependencies

In your project’s Sass document, import BS4’s _variables.scss (and optionally, _mixins.scss), along with _include-media.scss.

// Import Bootstrap parts
@import "../vendor/bootstrap/scss/variables";

// Import "include-media"
@import "../vendor/include-media/dist/include-media";

Include-media expects the Sass map to be called $breakpoints but the map in BS4 is called $grid-breakpoints, so we’re going to plug include-media into Bootstrap’s Sass map:

// 'include-media' plugging into Bootstrap 4's Grid Breakpoints map
//
$breakpoints: $grid-breakpoints;

That takes care of the configuration. I hope the final version of Bootstrap 4 includes something like include-media by default and integrate seamlessly, of course.

Usage

There is every combination of BS4 breakpoints at your disposal. You can mix and match, depending on the requirements of the task. Include-media also provides support for retina displays, portrait and landscape modes and a whole lot more. Here are some of the more common media queries:

// Below 34em (544px)
//
@include media("<xs") {
}

// Above 34em (544px)
//
@include media(">xs") {
}

// Below 48em (768px)
//
@include media("<md") {
}

// Between 34em (544px) and 48em (768px)
//
@include media(">sm", "<md") {
}

// Above 48em (768px)
//
@include media(">sm") {
}

// Below 62em (992px)
//
@include media("<lg") {
}

// Between 48em (768px) and 62em (992px)
//
@include media(">md", "<lg") {
}

// Above 62em (992px) 
//
@include media(">lg") {
}

// Below 75em (1200px)
//
@include media("<xl") {
}

// Between 62em (992px) and 75em (1200px)
//
@include media(">lg", "<xl") {
}

// Above 75em (1200px)
//
@include media(">xl") {
}

// Retine declarations, even with other breakpoints
//
@include media("retina2x", ">xl") {
}

// Complex alias
//
$retina3x-big-screen: ">=lg", "<xl", "landscape", "retina3x";

@include media($retina3x-big-screen) {
}

Demo

Let me provide a very simple example for the purpose of demonstration. Try out the demo in Codepen.

Here is our code to demonstrate the capabilities of BS4 grid breakpoints combined with include-media:

body {
  text-align: center;
  background-color: #E3CCB5;
  
  &::before {
    content: "<sm";
    color: #000;
    font-size: 5rem; 
  }
 
  @include media(">sm") {
    background-color: #B5CCE3;
    
    &::before {
      content: ">sm";
    }
  }

  @include media(">md") {
    background-color: #FFF1EB;
    
    &::before {
      content: ">md";
    } 
  }

  @include media(">lg") {
    background-color: #E6F5D6;
    
    &::before {
      content: ">lg";
    } 
  }
  
  @include media(">xl") {
    background-color: #F7F7D4;
    
    &::before {
      content: ">lg";
    } 
  }
}

See the Pen vLYyGX by Saddam Azad (@azadcreative) on CodePen.20544

Make sure to see the compiled code in Codepen to fully understand the CSS generated by this process.

Got any feedback? Get in touch and let me know.

Further Reading

  1. Approaches to Media Queries in Sass at CSS-Tricks

  2. Sass Mixins and Media Merging by Hugo Giraudel at Sitepoint.

Subscribe via email