Web Developer Path · lesson 14 of 18

Typography classes

Make text look designed with ready-made classes for display headings, lead paragraphs, alignment, colour and weight.

What you will learn

display headings .display-1 to .display-4
.lead, .small and .text-muted
alignment: .text-left, .text-center, .text-right
.text-uppercase, .font-weight-bold, colour classes like .text-primary

Understand the idea

A framework gives you the typography decisions already made. The real heading tags h1 to h6 are styled with sensible sizes. When you want large, light text for a page banner, add a display class: <h1 class="display-4"> is large and thin, and display-1 is the biggest. Choose the tag for the outline of your page and the class for the looks, never the other way round.

.lead makes an introductory paragraph a little bigger and lighter, .small makes text smaller, and .text-muted softens it to grey for hints and dates. Alignment classes .text-left, .text-center and .text-right align text, and .text-uppercase, .text-lowercase and .text-capitalize change its case.

Weight and colour are also classes: .font-weight-bold, .font-weight-light, .font-italic, and .text-primary, .text-success, .text-danger, .text-warning and .text-info for meaning-based colour. Do not rely on colour alone to carry a message; add words or an icon so everyone can understand it.

The preview has a small built-in version of the framework with the same class names, and its screen-width steps are shrunk to fit the narrow preview (the real ones are 576, 768, 992 and 1200 pixels).

Example

A banner with typography classes

<h1 class="display-4 text-center">Code Club</h1>
<p class="lead text-center text-muted">Every Saturday, ages 10 to 14.</p>
<p class="text-uppercase font-weight-bold text-primary">Join today</p>
<p class="small">Places are limited.</p>

Each class does one small job, and you combine them on the same element.

Your turn: code to type and practise

Write an h1 with the class display-4, a paragraph with the class lead, and a paragraph that uses text-center, text-muted and text-uppercase (the same element can carry several classes).

Stretch challenge

Add font-weight-bold and text-danger to a warning sentence.

← Responsive design and the 12-column grid Containers and spacing utilities →

HTML

Keep going in Web Developer Path

Responsive design and the 12-column grid

Inside a `div` with class `container`, build a `div` with class `row` that holds three `div` columns with class `col-md-4`, each containing an `h3` heading and a paragraph.

Start →15

Containers and spacing utilities

Make a `container-fluid` with the classes `bg-light` and `p-4`, and inside it a heading with `mb-3` and a paragraph with `mb-0`. Then add a second `div` with the classes `container` and `mt-3` that holds a box with the class `mx-auto`.

Start →16

Colours, badges, alerts, buttons and borders

Build a `div` with the classes `alert` and `alert-success`, two `span` badges with the class `badge`, a `button` with `btn` and `btn-primary`, a `btn-group` holding three `btn` buttons, and a `div` that has both `border` and `rounded`.

Start →17

Navbars and cards

Build a `nav` with the classes `navbar` and `bg-dark`, a `navbar-brand` link and a `navbar-nav` list with at least two `nav-link` links. Then build a `card` containing a `card-body` with a `card-title`, a `card-text` and a link styled as a `btn`.

Start →18

Carousels and scrollspy

Build a carousel with the id `slides`: an indicators list with three `li` items, a `carousel-inner` with three `carousel-item` slides (only the first is `active`), and a `carousel-caption` in the first slide. Then write `<body data-spy="scroll" data-target="#mynav">` as the start of a page with a `nav` whose id is `mynav`.

Start →

Practise the idea

🏋️ Play Grammar Gym

Adaptive English grammar practice in nine skills, with a SmartScore that climbs as you improve.

Play now

FAQ

Typography classes: common questions

What does the display-4 class do?

It makes a heading large and light for banners. display-1 is the biggest and display-4 the smallest of the display sizes.

Can an element have more than one class?

Yes. Separate the class names with spaces, for example class="text-center text-muted".

Should I choose a heading tag by its size?

No. Choose the tag for the page outline (h1 for the title, h2 for sections) and use classes to change how it looks.

I am stuck. What can I do?

Press Hint for a nudge, read the message next to each goal, and compare your code with the lesson text. If you still need it, Show answer reveals a model solution. Try to type it yourself rather than copy it.

Does my work get saved?

Your ticks and XP are saved in this browser, and in your account if you log in. The code you type is not stored on a server.

Start a conversation

Enjoying coding? Meet a teacher.

Tell us the learner's age, country and what they would like to build, and we will suggest a class. A parent or guardian can make the enquiry.

Tell us the learner’s age or grade and goals
We’ll suggest a suitable class or learning path
We’ll confirm format, timing and fees with a parent or guardian

Play it, don't just read it

Write some code right now

Free games that need no sign-up. Pick one and play for five minutes.

All free games →

Pick a game

Today's maths challengeFive questions · the same for everyone today · keep your streak goingPlay