Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at best practices for working resets provided by Bootstrap 5 and style text.

Sample Output

To display sample output, we can use the samp tag.

For example, we can write:

<samp>computer output</samp>

The samp tag is used for display text outputted by a computer.

Tables

Bootstrap 5 adjusted the table styles for its caption, collapse borders, and ensured consistent text-align throughout.

The .table class has more formatting changes.

Forms

Boostrap makes many adjustment to forms.

fieldset s have no borders, padding, or margin so they can be used easily as wrappers for individual inputs and groups of inputs.

legends have also been restyled to be displayed as headings.

label s are set to display: inline-block to allow margins to be applied.

input s, select s, textarea a and button s are mostly reset by Normalize.

Reboot removes their margin and sets line-height to inherit .

textarea s are modified to only be resiazble vertically since horizontal resizing breaks page layouts often.

button s and input button elements have cursor: pointer when it’s not disabled.

Pointers on Buttons

Pointer changes are applied to buttons.

It’s done on a button element automatically and also applied to anything with role='button' added.

Address Elements

address is updated to rest the browser default font-style from italic to normal.

line-height is now inherited.

margin-bottom: 1rem is added.

address elements are for presenting contact information for the nearest ancestor.

Formatting can be preserved with br elements.

Blockquote

Blockquotes have their default margin set to 0 0 1rem to make them more consistent with other elements.

Inline Elements

The abbr element receives basic styling to make it stand out amongst paragraph text.

Summary

The summary element has cursor set to pointer to convert that the element can be interactive with when we click on it.

HTML5 [hidden] Attribute

The hidden attribute is set to display: none important to help prevent display from getting accidentally overridden.

Typography

Bootstrap 5 provides us with a set of styles for typography.

It uses a native font stack that selects the best font-family for the OS and device that the page is displayed in.

The browser default root font-size is assumed, which is typically 16px.

It uses the $font-family-base , $font-size-base , and $line-height-base attributes as the typographic base applied to the body .

Bootstrap 5 also sets the global link color with the $link-color variable and apply link underlines only when we hover.

The $body-bg is set to a background-color on the body to #fff .

Headings

Styles are applied to all heading tags from h1 to h6.

There’re also the .h1 to .h6 classes.

We can either write:

<h1>h1 heading</h1>  
<h2>h2 heading</h2>  
<h3>h3 heading</h3>  
<h4>h4 heading</h4>  
<h5>h5 heading</h5>  
<h6>h6 heading</h6>

or:

<p class="h1">h1heading</p>  
<p class="h2">h2 heading</p>  
<p class="h3">h3 heading</p>  
<p class="h4">h4 heading</p>  
<p class="h5">h5 heading</p>  
<p class="h6">h6 heading</p>

Customizing Headings

We can customize headings with utility classes top recreate small secondary headings text from Bootstrap 3.

For example, we can use the text-muted class to change make lighter color text:

<h3>  
  <small class="text-muted">faded text</small>  
</h3>

Display Headings

Bootstrap 5 provides display heading classes, which are bigger than regular headings.

For example, we can write:

<h1 class="display-1">Display 1</h1>  
<h1 class="display-2">Display 2</h1>  
<h1 class="display-3">Display 3</h1>  
<h1 class="display-4">Display 4</h1>  
<h1 class="display-5">Display 5</h1>  
<h1 class="display-6">Display 6</h1>

to add them.

The classes all start with display- .

Lead

We can make paragraphs stand out with the .lead class.

For example, we can write:

<p class="lead">  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mi auctor, blandit nisi ac, venenatis erat. Proin aliquam auctor ipsum eu congue. Mauris consequat dolor id posuere posuere. Curabitur in blandit eros. Donec at dui turpis. Curabitur faucibus est enim, quis facilisis enim ultrices a. Vivamus sed tellus tortor. Fusce malesuada ante dui. Morbi dignissim sapien eu mattis facilisis. Nunc vel enim nec risus rhoncus mollis at accumsan diam. Aliquam sed volutpat turpis.  
</p>

to add special styles to our text.

Conclusion

We can build our own styles on top of Bootstrap 5’s default styles.

Also, we can style text in many ways.