Search within TutorialsPark

Twitter Bootstrap Typography


The Typograhy of Twitter Bootstrap


Twitter Bootstrap: Typography

1. The default font-stack of the twitter is Helvetica Neue , Helvetica , Arial and sans-serif.

2. By default, the body has fontsize of 14px and lineheight of 20px.


Twitter Bootstrap: Heading


1. All six heading levels are styled in Bootstrap CSS.From <h1> to <h6>

2.To have an inline subheading for any of the headers, simply use the <small> element to get smaller text in a lighter color.

Example: Twitter Bootstrap heading

Give it a TRY! »

Twitter Bootstrap : Lead Body Copy

1. To add emphasis a certain paragraph or text block, simply use the class="lead".

2. It renders text with larger font-size, lighter font-weight and taller line-height than the normal text

Example:Twitter Bootstrap Lead Body Copy

Give it a TRY! » Note: Colors can be set using keywords, Hex, rgba() or hsla() colors .


Twitter Bootstrap: Text Formatting

1. All type text formatting can be applied using the Bootstrap CSS styles.

Example:Twitter Bootstrap Text Formatting

Give it a TRY! »


Twitter Bootstrap: Emphasis Classes

Along side other text formatting elements, a few classes are available to apply emphasis to text blocks.

Example:Twitter Bootstrap Emphasis Classes

Give it a TRY! » Note: Incase of a conflict between the styles, the latest one is applicable .


Twitter Bootstrap: Abbreviations

The element <abbr> is used for abbreviations and acronymns, it used to provide information to search engines, translators, spell checks etc.

Example:Twitter Bootstrap Abbreviations

Give it a TRY! » Note: Hover over the underlined text to see the expanding text.

Twitter Bootstrap: Address

Along side other text formatting elements, a few classes are available to apply emphasis to text blocks.

Example:Twitter Bootstrap Address Classes

Give it a TRY! »

Twitter Bootstrap: Blockquotes

1.The element <blockquote> is to denote quotes from an outside source .

2.The source is specified using <small> element and the name of the source is specified using <cite> element.

Example:Twitter Bootstrap Blockquotes

Give it a TRY! » Note: It creates a thick grey border to the left side.


Twitter Bootstrap: Pull right Blockquotes

1.To create a pull right blockquote, simply add the class pull-right to <blockquote> element.

Example:Twitter Bootstrap Pull Right Blockquotes

Give it a TRY! » Note: It creates a thick grey border to the right side.