Search⌘ K
AI Features
Home
Courses
Bootstrap 4 Layouts in Depth

Improving the Typography

Explore how to improve typography in Bootstrap 4 web layouts by applying Bootstrap's text color classes, customizing fonts with Roboto and Roboto Slab, and managing styles effectively with SCSS and the Koala app. Understand best practices for font styling, including when to use the !important flag, to create more engaging, readable web pages.

We'll cover the following...

Change the color of the text

To change the color, we use Bootstrap contextual classes for text, i.e. text-* . We’ll also use the lead text class to make it a bit more prominent.

HTML
<footer class="container-fluid bg-dark py-3 pos-fix b0">
  <div class="container lead text-light">
    Made with love by Educative.io
  </div>
</footer>

Font style

Next, let’s make the entire page use the Roboto font.

NAME_
CSS
* {
  font-family: Roboto, 
  sans-serif !important; 
}

* is called the universal selector, and the !important flag we used on it ...