Documentation and examples for material design typography, including global settings, headings, body text, lists, and more.

The standard font for MDBootstrap is minimalist and elegant "Roboto" from Google.

About "Roboto"

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesques distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

Detailed documentation and more examples of text usage you can find in our Material Design Typography Docs.

Regular paragraph

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque architecto, consequuntur in omnis est repudiandae perspiciatis porro? Ut explicabo voluptatem, deleniti nostrum nam repellendus ipsam. Unde recusandae eum sint? Vel.

Paragraph with the .lead class

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque architecto, consequuntur in omnis est repudiandae perspiciatis porro? Ut explicabo voluptatem, deleniti nostrum nam repellendus ipsam. Unde recusandae eum sint? Vel.

Heading

All HTML headings, <h1> through <h6>, are available.

Heading Example

<h1></h1>

h1. Bootstrap heading

<h2></h2>

h2. Bootstrap heading

<h3></h3>

h3. Bootstrap heading

<h4></h4>

h4. Bootstrap heading

<h5></h5>
h5. Bootstrap heading

<h6></h6>
h6. Bootstrap heading

Heading classes

.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.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Customizing headings

Fancy display heading With faded secondary text