Responsive Size Classes in Bootstrap
Tags: bootstrap, scss, webdev, ui
Published: 2020-03-22 18:45:04

---
title: Responsive Size Classes in Bootstrap
published: true
description: In this article, I will show you how to easily create responsive size classes using Bootstrap's scss mixins.
tags: bootstrap,scss,webdev,ui
series: Customizing Bootstrap
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zjl25zw7hpgoj896wobd.png
canonical_url: https://blog.shhdharmen.me/responsive-size-classes-in-bootstrap-ckeldhup7000iwis12v3d3ayg
---

<small><i>This article was originally published on [blog.shhdharmen.me](https://blog.shhdharmen.me/responsive-size-classes-in-bootstrap-ckeldhup7000iwis12v3d3ayg)</i></small>

## TL;DR

I would recommend you to read the full article, but if you simply want the code, go to [final section](#lets-come-to-the-point) of this post.

## Background
So, in my previous article, we saw how we can create custom checkboxes and radio buttons. Wait, I hope you've read that article, if not check out now:

{% post https://dev.to/shhdharmen/create-custom-checkboxes-and-radios-in-bootstrap-28h2 %}

It was really cool and easy to do so, right!? So, now we are going to learn how we can create responsive size classes, using Bootstrap's scss mixins and variables.

## Size Classes

According to [Bootstrap's documentation](https://getbootstrap.com/docs/4.4/utilities/sizing/), we have some height and width classes, which gives size relative to the parent. For reference, they're listed in below images:

![Bootstrap's default width classes](https://dev-to-uploads.s3.amazonaws.com/i/expcdxtkg1nko4yqex5f.png)
![Bootstrap's default height classes](https://dev-to-uploads.s3.amazonaws.com/i/r7pqh61prhtapbs5jul3.png)

### Responsiveness

As you know, bootstrap already has responsive spacing classes, you can check them out [here](https://getbootstrap.com/docs/4.4/utilities/spacing/#notation).

What if we need the same responsiveness in our size classes? For example, `w-sm-50`, `h-lg-25`, `w-md-0`, etc.?

Don't worry...

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wvlj8m68dtbqdnygrk5a.gif)
<figcaption>GIF from <a href="https://tenor.com/u8Bh.gif" target="_blank">Giphy</a></figcaption>

## Basics

Before we actually go to code, we need to understand some of the functions, mixins, and variables of Bootstrap, which we will use to create our custom classes.

1. **Variable: $grid-breakpoints:** If you check Bootstrap's [_variables.scss](https://github.com/twbs/bootstrap/blob/c51e9fa4ee8fe8020decec064803e686eb9e1dde/scss/_variables.scss#L273-L279) file, they have `$grid-breakpoints` map, which has all the min-widths for each viewport size. Basically, this map is responsible for how Bootstrap works on different widths of the viewport.
![$grid-breakpoints in Bootstrap's _variables.scss](https://dev-to-uploads.s3.amazonaws.com/i/x37mff286bsb3x7gb8ks.png)

2. **Variable $sizes**: In the [same file](https://github.com/twbs/bootstrap/blob/dca1ab7d877bc4b664b43604657a2b5fbe2b4ecb/scss/_variables.scss#L152-L164), `$sizes` map is responsible for giving relative % values to height and width classes.
![$sizes in _variables.scss](https://dev-to-uploads.s3.amazonaws.com/i/2v98tsdl326b9heomww9.png)

3. **@function breakpoint-infix**: In the [_breakpoint.scss](https://github.com/twbs/bootstrap/blob/c51e9fa4ee8fe8020decec064803e686eb9e1dde/scss/mixins/_breakpoints.scss#L55-L57) file, this function returns the viewport name with a dash in front. This will be helpful to create responsive classnames.
![@function breakpoint-infix in _breakpoint.scss](https://dev-to-uploads.s3.amazonaws.com/i/bnmtd1pfc8qpga1fmffw.png)

4. **@mixin media-breakpoint-up**: Now in the [same file](https://github.com/twbs/bootstrap/blob/master/scss/mixins/_breakpoints.scss#L61-L70), note the mixin `media-breakpoint-up` and from the image below, it'll be pretty clear what it does:
![@mixin media-breakpoint-up in _breakpoint.scss](https://dev-to-uploads.s3.amazonaws.com/i/9r9upj1hw7duis7wrnpl.png)

## Let's come to the point

Create a file called `_sizing.scss`, I would prefer you to create it inside the `utilities` folder, and make sure to `@import` it after `~bootstrap.scss` in your main style file.

> Want a quick and handy setup for Bootstrap with gulp and sass (and much more, like sample theme file, [7-in-1 architecture](https://sass-guidelin.es/#the-7-1-pattern), etc.)? Refer to my Github repo **bootstrap-theme-kit**:

{% github shhdharmen/bootstrap-theme-kit %}

So, let's make use of those variable and mixins to create responsive size classes:

![Final code](https://dev-to-uploads.s3.amazonaws.com/i/ouxktjgln3ptdaq1944d.png)
<figcaption>Please don't hate me 🙏🏽 for uploading the image of a code snippet. It's just that I really want you to write this code ✏️ by yourself 😉.</figcaption>

Let's understand what's going on by line numbers:

1. *Line no. 4:* We are looping through each member of `$grid-breakpoints`
2. *Line no. 5:* We calling the mixin `media-breakpoint-up` for each member of `$grid-breakpoints`
3. *Line no. 6:* We reading viewport name (returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front) for each member of `$grid-breakpints`
4. *Line no. 8:* Now, we are looping through a static patterned map of `value: abbreviation`.
5. *Line no. 9:* It goes through each member of `$sizes` map, this not only helps us to create class names, but it will also give us % values for assignment to properties.
6. *Line no. 10-12:* These lines generate the classes, with property and value. For example, it generates classes like below. We are using [interpolation](https://sass-lang.com/documentation/interpolation) for using scss variables in class names and property names.

```css
// for breakpoint value `sm` and size of `25`, it will generate like below:
.h-25 {
  height: 25% !important;
}
.w-25 {
  height: 25% !important;
}

// for breakpoint value `md` and size of `75`, it will generate like below:
@media (min-width: 768px) {
  .w-md-75 {
    width: 75% !important;
  }
  .h-md-75 {
    height: 75% !important;
  }
}
```

I know it's too much to grasp in the first go, but just try to use it in multiple projects and you will find it easy.

For homework, try to generate colored background and font classes. Bootstrap provides [contextual classes](https://getbootstrap.com/docs/4.4/utilities/colors/) like `bg-primary` and `text-primary`. Try to generate specific color classes like: `bg-blue`, `text-blue`, `bg-indigo`, `text-indigo`, etc. *Hint: try to utilize `@each` and `$colors` map from Bootstrap's `_variables.scss` file.*

That's it for now, we will see you next time. Till then, let me know your thoughts and feedback in the comment section. And if you liked this article, I hope you will like my other articles, too:

{% link https://dev.to/shhdharmen/tiles-with-elevation-54nl %}
{% link https://dev.to/shhdharmen/create-custom-checkboxes-and-radios-in-bootstrap-28h2 %}
{% link https://dev.to/shhdharmen/dribble-challenge-01-keyboard-button-44jc %}
{% link https://dev.to/shhdharmen/dribbble-challenge-02-birthday-list-card-1g4f %}

And yes, always believe in yourself.

![believe in yourself](https://dev-to-uploads.s3.amazonaws.com/i/6yft9ereu9c6z0fu1kgg.jpg)
<figcaption>Photo by <a href="https://unsplash.com/@littleforestowl?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank">Katrina Wright</a> on <a href="https://unsplash.com/s/photos/believe?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank">Unsplash</a></figcaption>
<figcaption>Cover Photo by <a href="https://unsplash.com/@giorgiotrovato?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank">Giorgio Trovato</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank">Unsplash</a></figcaption>