Chapter 7: How to Build a Responsive Type Scale with Bootstrap

by Craig Watson

In this tutorial, we’ll be taking an in-depth look at how Bootstrap handles typography and how we can modify the code in a couple of different ways to create a responsive type scale. This is often referred to as “responsive typography”, the aim of which is to keep your typography readable on all screen sizes and avoid giant headings on mobiles!

How Bootstrap Sets Up Typography by Default

To understand the way Bootstrap typography works, we need to begin looking into the source SCSS files to explore the setup and default settings.

Note: for the sake of clarity throughout this tutorial, I’ve commented out styles from the Bootstrap code that are NOT associated with ...

Get Your First Week With Bootstrap now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.