Skip to Content
Learn
Learn Bootstrap 4: Utilities and Components
Styling Text

If we want to style and format text, we can use Bootstrap’s text utility classes.

For instance, if we want our text to be bold, we could add a class of "font-weight-bold" like so:

<p class="font-weight-bold"> This rendered text is bold. </p>

We can also combine Bootstrap classes for additional styling. Let’s say we wanted our text to also be uppercased. We would add "text-uppercase" to the class attribute:

<p class="font-weight-bold text-uppercase"> This rendered text is both bold and uppercased. </p>

Let’s make use of these text utility classes!

Instructions

1.

In the <body>, there is an unstyled <p> that we can practice styling on.

Let’s first make the <p>‘s text entirely uppercased by assigning it a class of "text-uppercase".

2.

Let’s keep styling our text! This time, add a utility class to the <p> and make the text italicized.

We should consult Bootstrap’s font weight and italics documentation for what utility class to add.

3.

We should add one more class to practice our documentation reading skills.

Browse Bootstrap’s documentation to find the utility class that will right align the <p> element’s text.

Folder Icon

Sign up to start coding

Already have an account?