• 12 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 9/3/20

Make Your Layout Responsive

Log in or subscribe for free to enjoy all this course has to offer!

What's Responsiveness All About?

We live in a time of increasingly fast advances in technology. It feels like there's a new device being released to the market every day! While this pace can be exhilarating, it can also be exhausting to keep up with all of the variations in screen sizes you need to take into account to make sure the websites you're building look and work well.

This is one of the reasons Bootstrap is so popular with front-end developers. It takes a mobile-first approach, meaning that its grid and components are designed to render correctly on small screens by default. 

You've probably had the experience of opening a web page in your smartphone to find that the developers had built a site that only works well on big screens. That's a very frustrating experience, and you don't want to be the kind of developer that builds frustrating experiences for users, right?

You do this by creating responsive websites.

The good news is that you don't have to create a different layout for every screen size. You can make your work easier, while still creating great user experiences, by grouping all the screen sizes into different buckets, or size ranges, and generating layouts for each range.

A typical example is to have one layout that's shown on devices with large screens (desktop computers); another for devices with medium-sized screens (tablets and small laptops); and a third for smaller devices (smartphones).

As a front-end developer, I pay attention to detail and I need to have more precise definitions than large, medium, small, etc. I need to know the exact measurements of each of these. So how many pixels, exactly should each of these sizes be?

The developers of Bootstrap also asked that question and came up with answers based on industry best practice, defining these ranges:

Size

Breakpoint

Class modifier

Extra small

<576px

none

Small

≥576px

-sm

Medium

≥768px

-md

Large

≥992px

-lg

Extra large

≥1200px

-xl

As you can see, there are five size ranges built into Bootstrap 4, which gives you a lot of options out of the box.

The five grid breakpoints built into Bootstrap 4. 1: very small screens, like some smartphones. 2: small screens, like most smartphones. 3: medium screens, like tablets. 4: large screens, like laptops. 5: very large screens, like desktops.
The five grid breakpoints built into Bootstrap 4

Many Bootstrap classes for layout and components let you add a size-related modifier to control how they're rendered on the relevant screen size.

We'll start by looking at how this works in practice with the Bootstrap grid and other examples as we explore the components.

Responsiveness in Action

We’ve covered a lot of theory, so you’re probably raring to go and put this into practice!

Let’s start by looking at how responsiveness works for the Bootstrap grid. The following video will show how a layout changes as the size of the viewport changes:

In the video, only three layouts were used (small, medium, and large). Even though Bootstrap has five built-in breakpoints, you might want to implement two or three layouts depending on your time and resources. Remember that in addition to the extra effort you would have to put into developing and testing each layout, a designer would also likely have to provide input into each one.

To apply the appropriate Bootstrap class modifiers for these layout options, it’s important to understand that they work upwards. For example, a class with the modifier -md will apply to all medium-size screens and bigger (in other words, viewports with a width ≥768px), unless there are class modifiers applied to an element for large (-lg) or extra-large (-xl). You can see that the extra-small size doesn’t need a class modifier. Since Bootstrap is mobile-first, if you don't add a size-related class modifier, they will automatically render the relevant grid elements and components to the smallest screens and will maintain the same layout as they grow.

This code snippet shows what this looks like for the blue row in the last video:

<div class="container">
...
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
One of two columns
</div>
<div class="col-6 col-md-8 col-lg-9">
One of two columns
</div>
</div>
</div>

Here is a row with two child divs which take up different widths depending on the viewport size. Remembering that the class modifiers work upwards, the way to interpret the classes for the first of the row's child divs is:

  • The  .col-6  class means: for all screens with extra-small size (basically all screen sizes) upwards, allocate six columns to this div.

  • The .col-md-4  class means: for all screens with a medium width (768px) upwards, allocate four columns to this div.

  • The  .col-lg-3  class means: for all screens with a large width (992px) upwards, allocate three columns to this div.

A similar logic would apply to the second child div. Notice that the total number of columns allocated for each of the class modifiers still adds up to the 12 columns of the Bootstrap grid.

Now, let’s apply what you’ve learned to our Space School website. The example you’ll be working on will be implementing two layouts:

  • One for extra-small screens up to medium screens, which will be referred to as the smaller screen layout.

  • One for large screens and above, which will be referred to as the larger screen layout.

In the last chapter, we created the three-column layout for the information cards on the homepage. But since we didn’t use the class modifiers with the .col class, the content of the row with the cards will be split into three columns on all screen sizes. That’s not a good experience for users of smartphones as the screen would end up being quite crowded!

For small screens, the info cards should take up the full width of the screen (in other words, 12 columns) as this screenshot shows:

The design of the homepage for the example Space School website for small screens. It shows a collapsed header section with the branding and a navigation toggle button; an image carrousel and information about the benefits of joining the Space School
Homepage design for smaller screens

Make the layout responsive by displaying the three cards in a row together for larger screens (as they were in the last chapter) and stack on top of each other on the smaller screens.

As mentioned previously, any Bootstrap classes that don't have size class modifiers will be used for the smallest screens upwards. In the case of the cards for the homepage, you should wrap each of them in a column div that has these classes:

  • .col-12: this class will expand the div to take up the full width (12 columns) of the screen for extra-small screens upwards.

  • .col-lg-4: this class will cause the div to take up four columns (1/3 of the screen) on large screens upwards.

So the wrapper div for each of the info cards will look like this:

<div class="col-12 col-lg-4">
[...card content...]
</div>

For now, we’re focusing on the grid structure so we’re just putting some placeholder text in for the content. We’ll be adding the components and content later in the course as we continue to build out the site.

Go ahead and update the homepage of your sample site so that the divs containing the cards are responsive. Once you’ve tried it yourself, you can check your work against the index.html file in the part-2/chapter-3/responsive-grid folder in the GitHub repository of the example site.

Let’s Recap!

  • Bootstrap 4 is a mobile-first front-end framework.

  • You now know the default breakpoints in Bootstrap and how to implement a responsive grid structure.

Now that you’ve learned how to make a Bootstrap grid responsive, you’re ready to start adding UI components to your pages.

Example of certificate of achievement
Example of certificate of achievement