Full Stack MERN Web Development

Bootstrap Text Component

Bootstrap Typography is used to manipulate text. Bootstrap is controlled with inline styles.
The style call is placed inside the controlling HTML tag. More information can be found here.

In some examples below, we change the background color to highlight some of the different text
components. Background colors are covered more specifically in a later lesson..

Bootstrap Text Utilities

[ class="text-start" ] Text aligned to start. (left)

[ class="text-center" ] Text aligned to center.

[ class="text-end" ] Text aligned to end. (right)

Text Wrapping

[ class="text-wrap" ] This is a very long string of text that should wrap to the next line if it exceeds the width of the container which it should eventually do so we can see how text wrapping behaves in Bootstrap.

[ class="text-nowrap" ] This text will not wrap onto a new line.

[ class="text-truncate" ] This is a long text that should be truncated: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Transformation

[ class="text-lowercase" ] Lowercased text.

[ class="text-uppercase" ] uppercased text.

[ class="text-capitalize" ] capitalized text.

Text Colors

[ class="text-primary" ] Primary color text.

[ class="text-secondary" ] Secondary color text.

[ class="text-success" ] Success color text.

[ class="text-danger" ] Danger color text.

[ class="text-warning" ] Warning color text.

[ class="text-info" ] Info color text.

[ class="text-light" ] Light color text (on dark background).

[ class="text-dark" ] Dark color text.

[ class="text-muted" ] Muted color text.

[ class="text-white" ] White color text (on dark background).

Font Weights

[ class="fw-bold" ] Bold font weight.

[ class="fw-bolder" ] Bolder font weight.

[ class="fw-normal" ] Normal font weight.

[ class="fw-light" ] Light font weight.

[ class="fw-lighter" ] Lighter font weight.

[ class="fw-italic" ] Italic font style.

Font sizes

[ class="fs-1" ] Font size 1

[ class="fs-2" ] Font size 2

[ class="fs-3" ] Font size 3

[ class="fs-4" ] Font size 4

[ class="fs-5" ] Font size 5

[ class="fs-6" ] Font size 6

Display Headings and Font Size Utilities,
all headings are < h1>

[ class="display-1" ] Display 1 - Heading

[ class="display-2" ] Display 2 - Heading

[ class="display-3" ] Display 3 - Heading

[ class="display-4" ] Display 4 - Heading

[ class="display-5" ] Display 5 - Heading

[ class="display-6" ] Display 6 - Heading

Block Quotes

Daily Motivation

[ < blockquote class="blockquote"> ]

"The only way to do great work is to love what you do." - Steve Jobs

[ < footer class="blockquote-footer"> ]
Someone famous in Source Title