Discuss

Bootstrap Typography and Text

Global Settings

Bootstrap sets basic global display, typography, and link styles as follows.
1. body text colour
2. link colour
3. body colour
4. native font stack that selects the best font-family for each OS and device
5. font size of 1em (typically 16px)

Headings and Paragraphs

Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.

Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section. For more, see https://www.w3.org/WAI/tutorials/page-structure/headings/

Adding a Heading and Paragraphs

In an empty column, select the add-inside-button and choose Heading from the context menu.

Select the level (Type) that is required. Make sure to follow the recommendation as outlined above.

Select the Heading click-after-button and select Paragraph from the context menu.

To add extra paragraphs, choose the duplicate button while the paragraph is selected.

To change the text, select the Text Edit Mode

Click on the text a few times so that it is highlighted

Type or paste the text as wanted.

Customizing Headings and Paragraphs

Using the Context Menu

When a text is highlighted, a context menu appears. The icons denote
1. Changing the text to bold
2. Changing the text to italic
3. Changing the text to a link
4. Undoing the link
5. Undoing the bold and italic formatting
6. Adding a Font Awesome icon
7. Changing the text to dynamic text

The last of these will be discussed in a document that covers dynamic web sites.

To add a link, simply highlight the text and select the link icon.

The same applies to the bold and italic icons.

To add a Font Awesome icon, select the spot to insert the icon and choose the Font Awesome icon

In the pop-up, select the wanted icon

The result

Using Classes to resize

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

To change the size of the heading from

Add an appropriate class to the heading. In this case an .h3 is added.

In a similar way, a paragraph can be transformed.

As with heading classes (.h*), there are also Font Size classes (.fs-*). Sizing for these utilities matches HTML’s heading elements, so as the number increases, their size decreases.

image

At the moment, these classes have to be entered by hand, as in

Adding Secondary Text

To add secondary text to the heading, select the insert-after-button and choose More.

Choose Secondary Text

This places a line of secondary text beneath the heading.

To place the secondary text next to the heading, grab the Secondary Text element in App Structure and move it inside the heading.

Display Headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Select the heading, in the Properties panel, go down to Size in the properties panel and choose the size

Text

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. Previously we saw that selecting a portion of the text, it was possible to convert that portion to Bold, Italic and or a Link.

In this section we discuss the utilities that are applied to the element that contains the text, such as <h*> and <p>.

Colour

Select the element, in this case

, and choose a colour from the Properties panel

Deprecation: the .text-black-50 and .text-white-50 are deprecated as of v5.1.0. They’ll be removed in v6.0.0.

image

Deprecation: the .text-muted utility has been deprecated as of v5.3.0. It will be removed in v6.0.0.

image

Conveying meaning to assistive technologies
Using colour to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the colour is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Alignment

Easily realign text to components with text alignment classes. For start, end, and centre alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

In the following example, the text has been centred for the Mobile view and start aligned for Tablets and larger devices.

Font Weight

Quickly change the font weight using the Font Weight utilities. These are not responsive, meaning that they are applied to all screens sizes.

Line Height

Using Line Height utilities.

Font Style

Change the style of the text.

Italic

Mark

You can use Mark to highlight the text.

Lead

Make a paragraph stand out by adding .lead.

Small

In contrast (to Lead), this makes the text less important,

Monospace

Want a typewriter style? The font type can be changed in the Theme Manager.

Text Transform

Transform text in components with text capitalization classes.

Note how .text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.

Text Wrapping and Overflow

If you do not want the text to wrap to the next line as in

You can use the .text-nowrap class as in

Text Truncation

To truncate long strings of text with an ellipsis use the .text-truncate class. This will truncate the text to fit inside the container.

Word Break

A hill near Porangahau in New Zealand is called Taumatawhakatangi­hangakoauauotamatea­turipukakapikimaunga­horonukupokaiwhen­uakitanatahu

When .text-nowrap is set, it will break the component as in

To break this word we use the .text-break class as in

Responsive Font Sizes

In Bootstrap 5, responsive font sizes have been enabled by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the RFS page to find out how this works