YouTip LogoYouTip

Bootstrap Typography

Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif as its default font stack. Using Bootstrap's typography features, you can create headings, paragraphs, lists, and other inline elements. * * * ## Headings Bootstrap defines styles for all HTML headings (h1 through h6). See the example below: ## Example

Heading 1 h1

Heading 2 h2

Heading 3 h3

Heading 4 h4

Heading 5 h5
Heading 6 h6
[Try it Β»](#) The result is as follows: ![Image 1: Headings](#) ### Inline Subheadings If you need to add an inline subheading to any heading, simply add a tag around the text, or add the **.small** class. This will give you smaller, lighter text, as shown in the example below: ## Example

Heading 1 h1. Subheading 1 h1

Heading 2 h2. Subheading 2 h2

Heading 3 h3. Subheading 3 h3

Heading 4 h4. Subheading 4 h4

Heading 5 h5. Subheading 5 h5
Heading 6 h6. Subheading 6 h6
[Try it Β»](#) The result is as follows: ![Image 2: Inline Subheadings](#) * * * ## Lead Body Copy To add emphasis to a paragraph, you can add the class="lead". This will result in larger, bolder text with a higher line height, as shown in the example below: ## Example

Lead Body Copy

This is a demo of the lead body copy usage. This is a demo of the lead body copy usage. This is a demo of the lead body copy usage. This is a demo of the lead body copy usage. This is a demo of the lead body copy usage. This is a demo of the lead body copy usage. This is a demo of the lead body copy usage. This is a demo of the lead body copy usage.

[Try it Β»](#) The result is as follows: ![Image 3: Lead Body Copy](#) * * * ## Emphasis HTML's default emphasis tags (sets text to 85% of the parent size), (makes text bolder), and (makes text italic). Bootstrap provides some classes for emphasizing text, as shown in the example below: ## Example This line of text is meant to be treated as fine print.
This line of text is meant to be treated as bold text.
This line of text is meant to be treated as italicized text.

Left aligned text.

Center aligned text.

Right aligned text.

This line of text is muted.

This line of text has a primary class.

This line of text has a success class.

This line of text has an info class.

This line of text has a warning class.

This line of text has a danger class.

[Try it Β»](#) The result is as follows: ![Image 4: Emphasis](#) * * * ## Abbreviations HTML's element provides markup for abbreviations and acronyms, like WWW or HTTP. Bootstrap styles elements with a dotted border bottom and a help cursor on hover, providing basic styling for abbreviations (as long as you provide a title attribute). For even more abbreviation styles, simply add the .initialism class to . ## Example WWW
RSS [Try it Β»](#) The result is as follows: ![Image 5: Abbreviations](#) * * * ## Address Use the
tag to present contact information for the author or owner of a document. Since
defaults to display: block;, you'll need to use
tags to add line breaks to the enclosed address text. ## Example
Some Company, Inc.
007 street
Some City, State XXXXX
P: (123) 456-7890
Full Name
mailto@somedomain.com
[Try it Β»](#) The result is as follows: ![Image 6: Address](#) * * * ## Blockquotes Wrap any HTML text in a
for a basic quote. For adding attribution, add a tag inside the
to identify the source. Add class _.pull-right_ to align the blockquote to the right. The following example demonstrates these features: ## Example

This is a default blockquote. This is a default blockquote. This is a default blockquote. This is a default blockquote. This is a default blockquote. This is a default blockquote. This is a default blockquote. This is a default blockquote.

This is a blockquote with a source title. Someone famous in Source Title
This is a right-aligned blockquote. Someone famous in Source Title
[Try it Β»](#) The result is as follows: ![Image 7: Blockquotes](#) * * * ## Lists Bootstrap supports ordered lists, unordered lists, and definition lists. * **Ordered Lists**: Ordered lists are lists where the order of items matters. * **Unordered Lists**: Unordered lists are lists where the order of items does not matter. They are styled with a bullet by default. To remove the default list style, use the class _.list-unstyled_. To display all list items on a single line, use the class _.list-inline_. * **Definition Lists**: In this type of list, each list item can contain
and
elements.
is used for the _definition term_ (like a dictionary). The
is the description for the
. The `.dl-horizontal` class makes the terms and descriptions in a
sit side-by-side. Starting with a stacked layout (like the default
), the terms and descriptions will align side-by-side as the viewport width expands. The following example demonstrates these types of lists: ## Example

Ordered List

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4

Unordered List

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Unstyled List

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Inline List

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Definition List

Description 1
Item 1
Description 2
Item 2

Horizontal Definition List

Description 1
Item 1
Description 2
Item 2
[Try it Β»](#) The result is as follows: ![Image 8: Lists](#) * * * ## More Typography Classes The table below provides examples of more Bootstrap typography classes: | Class | Description | Example | | --- | --- | --- | | .lead | Makes a paragraph stand out | (#) | | .small | Sets text to small (85% of the parent size) | (#) | | .text-left | Aligns text to the left | (#) | | .text-center | Aligns text to the center | (#) | | .text-right | Aligns text to the right | (#) | | .text-justify | Justifies text, with text wrapping when it exceeds the screen width | (#) | | .text-nowrap | Prevents text from wrapping when it exceeds the screen width | (#) | | .text-lowercase | Transforms text to lowercase | (#) | | .text-uppercase | Transforms text to uppercase | (#) | | .text-capitalize | Transforms text to capitalize the first letter of each word | (#) | | .initialism | Displays the text inside an element in a smaller font and can transform lowercase letters to uppercase | (#) | | .blockquote-reverse | Aligns a blockquote to the right | (#) | | .list-unstyled | Removes the default list style and left-aligns list items (in
    and
      ). This class only applies to direct child list items (to remove styles from nested lists, you need to apply the class to the nested list as well) | (#) | | .list-inline | Places all list items on a single line | (#) | | .dl-horizontal | Floats
      and
      elements side-by-side. See the example for implementation details | (#) | | .pre-scrollable | Makes a
       element scrollable. The code block area has a maximum height of 340px, after which a scrollbar will appear on the Y-axis | (#) |
← Bootstrap CodeBootstrap Grid System Example3 β†’

YouTip © 2024-2026 | Home | Learn Technology, Build Dreams!

All content is for educational and learning purposes only.