Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight):
The small element is used to create a lighter, secondary text in any heading:
Use the mark element to highlight text.
The abbr element is used to mark up an abbreviation or acronym:
The WHO was founded in 1948.
The blockquote element is used to present content from another source:
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
The dl element indicates a description list:
Inline snippets of code should be embedded in the code element:
The following HTML elements: span, section, and div defines a section in a document.
For multiple lines of code, use the pre element:
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Bold text.
Normal weight text.
Light weight text.
Italic text.
Use the .lead class to make a paragraph "stand out":
This paragraph stands out.
This is a regular paragraph.
Use the .small class to make the text smaller:
This paragraph is smaller.
This is a regular paragraph.
Left-aligned text.
Right-aligned text.
Center-aligned text.
Justified text. Justified text. Justified text. Justified text. Justified text. Justified text.
No wrap text. No wrap text. No wrap text. No wrap text. No wrap text. No wrap text. No wrap text. No wrap text. No wrap text. No wrap text. No wrap text. No wrap text.
Tip: Try to resize the browser window to see the behaviour of justify and nowrap.
Lowercased text.
Uppercased text.
Capitalized text.
The WHO was founded in 1948. (normal abbr)
The WHO was founded in 1948. (slightly smaller abbr)
The class .list-unstyled removes the default list-style and left margin on list items (immediate children only):
The class .list-inline places all list items on a single line, when used together with the .list-inline-item:
For multiple lines of code, use the pre element:
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
If you add the .pre-scrollable class, the pre element gets a max-height of 350px and provides a y-axis scrollbar:
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
Line 16
Last
Use the contextual classes to provide "meaning through colors":
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary text.
This text is dark grey.
This text is light grey (on white background).
This text is light grey (with a dark background).
This text is white (on white background).
This text is white (on dark background).
Hover over the links.
Muted link. Primary link. Success link. Info link. Warning link. Danger link. Secondary link. Dark grey link. Light grey link. Light grey link. White link. White link.Use the contextual background classes to provide "meaning through colors".
Note that you can also add a .text-* class if you want a different text color:
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary background color.
Dark grey background color.
Light grey background color.
Primary background with dangerous text