Bootstrap4 Typography

Here, we will discuss about styling the text content with Bootstrap 4.

Default Settings

Here are some default settings for text in Bootstrap 4:

  • The default font-size is kept as 16px with a line-height of 1.5
  • Bootstrap 4 uses “Helvetica Neue”, Helvetica, Arial, sans-serif as The default font-family
  • Additionally, all the <p> elements on the page are positioned with the margin-top property as 0 and margin-bottom property as 1rem or 16 px.

<h1> – <h6> Tags

The font-size and font-wight for the 6 heading tags, has been made a bit bigger and bolder in Bootstrap 4.

Here’s the specific dimensions of the heading tags <h1> – <h6>

  • h1 : 2.5rem or 40px
  • h2 : 2rem or 32px
  • h3 : 1.75rem or 28px
  • h4 : 1.5rem or 24px
  • h5 : 1.25rem or 20px
  • h6 : 1rem or 16px

Display Headings

If the normal HTML heading tags are not enough for you, Bootstrap 4 has Display headings to stand out more on your web-pages.

These have comparatively larger font-size but a lighter font-weight. The display headings can be included using the display classes – .display-1, .display-2, .display-3 and .display-4.

Additionally, Bootstrap 4 uses the HTML <small> element to create a lighter, secondary text in any heading.

Here are some more HTML tags the Bootstrap styles for Typography:

  • <mark> element is styled with some padding and a yellow background-color to go with
  • <abbr> element is styled with a dotted border bottom
  • To quote blocks of content from another source you can add the .blockquote class to the <blockquote> element
  • For <dl> elements the description topic (dt) is kept bold while the <dd> elements are light and with smaller fonts.

More Typography Classes

Bootstrap 4 has a lot to offer for most of the HTML tags when it comes to styling.

Apart from the ones discussed above, you can add further styling to you HTML elements using the following classes:

  • .font-weight-bold: for font weight as bold
  • .font-italic: for font style as Italic
  • .font-weight-light: for Light weight text
  • .font-weight-normal: for no style on the text
  • .lead: for making any paragraph stand out
  • .small: to set the text-size as 85% of the parent text
  • .text-left: to left-align the text
  • .text-*-left: to left-align the text on small, medium, large or xlarge screens
  • .text-center: to center-align the text
  • .text-*-center: to center-align the text on small, medium, large or xlarge screens
  • .text-right: to right-align text
  • .text-*-right: to right-align text on small, medium, large or xlarge screens
  • .text-justify: to justify the text
  • .text-monospace: to monospace the text
  • .text-nowrap: for no wrapping of the text
  • .text-lowercase: for lowercased text
  • .text-uppercase: for uppercased text
  • .text-capitalize: for capitalized text
  • .initialism: Used with the <abbr> element. Displays the content with slightly smaller font-size
  • .list-unstyled: to remove the default list-style
  • .list-inline: to place all the list items on a single line. It is generally used together with the .list-inline-item on each <li> elements
  • .pre-scrollable: to make the <pre> element scrollable

These built-in classes and features in Bootstrap 4 help the developers to style the text content of the website more easily than while working on HTML or CSS.