• 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

Add Typographic Elements to Your Page

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

The web started as a protocol for displaying text documents—after all, it is built on HTTP: the HyperText Transfer Protocol!

While there’s been a massive growth in the use of other types of media, text still accounts for most of the web’s content. So it’s important to know how to display and format it on your web pages, which is what you'll learn in this chapter.

Headings

Bootstrap 4 has styling for all HTML headings from  <h1>  through to  <h6>. To apply the heading style, all you need to do is use the relevant  <h*>  tag. You also have the option of adding a  .h1  to  .h6  class to other tags like a  <p>  tag, if you can’t use the <h*> elements.

Let’s See How This Works in Practice!

Coding application
Houston... ?
It seems you're not connected to the internet.
You are not signed in

Sign in to access coding exercises and test your new skills.

Make sure to practice in this chapter before moving on.
 

You’ve already seen the heading tags used in the cards and the Lessons page. The other place they’ll be used is in the Lesson Details page, which you’ll start working on in the next section.

Lists

Bootstrap 4 also applies styles to the HTML  <ul>  and  <ol>  list tags, so you get nicely-styled lists out of the box.  You can also remove the styling from a list by adding the  .list-unstyled  class.

Another option is to create an inline list by adding a .list-inline class to the  <ul>  tag and  .list-inline-item  class to its  <li>  children:

<ul class=”list-inline”>
<li class=”list-inline-item”>These</li>
<li class=”list-inline-item”>Items</li>
<li class=”list-inline-item”>Will be</li>
<li class=”list-inline-item”>Inline</li>
</ul>

Formatting

Text Alignment

In Bootstrap, you can change the alignment of text within an element by adding one of the text alignment classes. The classes are self-explanatory:

Class

Description

.text-left

Left align text in an element

.text-center

Center align text in an element

.text-right

Right align text in an element

Text alignment in Bootstrap also has responsive classes that can adjust the alignment based on the viewport size using the class modifiers as the grid system.

Some examples of responsive alignment are:

Class

Description

.text-sm-left

Left align text on all small (sm) viewports or larger

.text-md-center

Center align text on all medium (md) viewports or larger

.text-lg-right

Right align text on all large (lg) viewports or larger

.text-xl-center

Center align text on all extra-large (xl) viewports

The above are just some examples of the available combinations. You can combine any of the four class modifiers (sm,  md,  lg, and xl) with any of the text alignment classes in this way. There’s no need to use the extra-small (xs) class modifier with text alignment classes since using the classes without a class modifier (i.e., .text-center) applies the alignment on extra-small viewports or larger.

To achieve responsive alignment that changes with the viewport size, you can combine alignment classes in an element. For example, if you want the text content of an element to be center-aligned on extra-small viewports or wider, up to large viewports and then to left-aligned on large viewports or wider, you would use the class modifiers in this way:

<p class=”text-center text-lg-left>
[The alignment of this text would change depending on the viewport size]
</p>

Font Weight

With Bootstrap, you can change the formatting of any text element by adding the relevant  .font-weight-*  class. These are the available classes and their effect on font weight:

Class

Effect

font-weight-bold

Bold text

font-weight-bolder

Bolder weight text (relative to the parent element

font-weight-normal

Normal weight text

font-weight-light

Light weight text

font-weight-lighter

Lighter weight text (relative to the parent element)

It’s pretty straight forward, isn’t it?

You can also change an element's text format to italic by adding the .font-italic class as shown in this code sample:

<p>
[Sometimes you might want to <span class="font-italic">italicize some words</span> to emphasize them!]
</p>

It’s time to put together some of what you’ve learned in this chapter to make the site's footer section. As a reminder, this is what the footer section looks like:

A screenshot of the footer showing the light background color and placeholder links to “About Us”, “Privacy”, and “Terms of Use” pages
Footer

You can use a centered inline list for the footer's content. Also, apply what you learned to use one of Bootstrap’s background color classes. Finally, use the same HTML structure as the header section to make the background of the footer span the width of the page while keeping its content contained in a   .container div.

If you need to, check your work against the part-3/chapter-2/footer folder in the course's GitHub repository.

Let’s Recap!

  • You can implement heading text using heading tags or by adding a heading class to other tags.

  • You now know how to create inline lists and use Bootstrap classes for formatting and aligning text.

Now that you’ve learned how to use Bootstrap’s typography classes to format the site’s text, you’re ready to start enhancing the pages with visual media like images and video.

Example of certificate of achievement
Example of certificate of achievement