The Material Design type system is designed to display written content as clearly and efficiently as possible. In this theme, we have used Material Design fundamentals alongside Bootstrap's typography system.

Headings

Traditional heading elements have been restyled to match the Material type system. The alternative Bootstrap classes, .h1 through .h6 are also available to use instead of the HTML heading elements.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Display Headings

Bootstrap's display headings have their styling modified to match Material's headline elements. These elements can be used on any element, and are named using the format .display-{value} where value is a number 1 through 6.

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Subheadings

Three variations of subheadings are included with this theme. Two subheading variations, which match Material's subtitle options, and the more opinionated overline element.

Subheading 1

Subheading 2

Overline

Body Text

By default, the type system for this theme uses the Material standard Roboto typeface. We have kept the .lead option for emphasizing leading paragraph text, and we have modified the .small or small text option to match Material's type system. A caption text variant has also been created.

Material Admin Pro keeps the global letter spacing on body text at a normal default. In order to match the Material Design specification for body text, which is slightly expanded with an increased letter spacing, visit our text utilities page.

This is an example of lead text.

This is an example of a standard paragraph.

This is an example of a paragraph with small type.

This is an example of caption text.

Inline text elements, abbreviations, blockquotes, and lists are all supported as a part of this theme, but have not had their markup or design significantly modified past what Bootstrap offers by default. Visit Bootstrap's typography documentation for usage examples of these elements.

Code

Wrap inline snippets of code using the <code> element, or larger blocks of code using the <pre> element.

By default, the styling of the code and pre elements are simplified. For custom syntax highlighting (like in the HTML and Pug tabs of the demo below), use the code blocks plugin for additional options.

<code>This is the default inline code.</code>

<code>This is inline code using the .code-inline class.</code>

<pre>
    <code>This is the default code block.</code>
</pre>

Typography