Online

Bootstrap - Typography

Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif in its default font stack. Using typography feature of Bootstrap you can create headings, paragraphs, lists and other inline elements. Let see learn each one of these in the following sections.

Headings

All HTML headings (h1 to h6) are styled in Bootstrap. An example is shown below -

Example :-

Result

I'm Heading1 h1

I'm Heading2 h2

I'm Heading3 h3

I'm Heading4 h4

I'm Heading5 h5
I'm Heading6 h6

Inline Subheadings

To add an inline subheading to any of the headings, simply add around any of the elements or add .small class and you will get smaller text in a lighter color as shown in the example below -

Example :-

Result

I'm Heading1 h1. I'm secondary Heading1 h1

I'm Heading2 h2. I'm secondary Heading2 h2

I'm Heading3 h3. I'm secondary Heading3 h3

I'm Heading4 h4. I'm secondary Heading4 h4

I'm Heading5 h5. I'm secondary Heading5 h5
I'm Heading6 h6. I'm secondary Heading1 h6

Lead Body Copy

To add some emphasis to a paragraph, add class = "lead". This will give you a larger font size, lighter weight, and a taller line height as in the following example -

Example

Result

Lead Example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Emphasis

HTML's default emphasis tags such as <small> sets text at 85% the size of the parent, <strong> emphasizes a text with heavier font-weight, and <em> emphasizes a text in italics.

Example

Result

This content is within tag
This content is within tag
This content is within tag and is rendered as italics

Left aligned text.

Center aligned text.

Right aligned text.

This content is muted

This content carries a primary class

This content carries a success class

This content carries a info class

This content carries a warning class

This content carries a danger class