Bootstrap Typography - Bootstrap

What is Typography of Bootstrap?

Default font stack used by Bootstrap is Helvetica Neue, Helvetica, Arial, and sans-serif. Using typography feature of Bootstrap you can generate headings, paragraphs, lists and other inline elements. Let learn each one of these in the following sections.

Headings

In Bootstrap All HTML headings are styled in (h1 to h6). An instance is shown below −

The above code section with Bootstrap will yield following result –

Why Inline Subheadings Used?

Inline Subheadings

To enhance an inline subheading to any of the headings, simply add <small> 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 −

The above code section with Bootstrap will yield following 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

Why Lead Body Copy Used?

Lead Body Copy

To improve some importance 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 sinstance −

Lead Example

This is an example paragraph demonstrating the use of lead body copy. This is an example paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating the use of lead body copy.

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.

Bootstrap suggests limited classes that can be used to offer emphasis on texts as seen in the following instance –

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

What are Abbreviations?

Abbreviations

The HTML <abbr> section offers markup for abbreviations or acronyms, like WWW or HTTP. Bootstrap styles <abbr> elements with a light dotted border along the bottom and reveals the full text on hover (as long as you add that text to the <abbr> title attribute). To get a a slightly smaller font size add .initialism to <abbr>.

WWW
RSS

Why Address Text Used?

Addresses

We can display the contact information on your web page using <address> tag. Since the <address> defaults to display: block; you’ll need to use
Tags to add line breaks to the enclosed address text.

Some Company, Inc.
007 street
Some City, State XXXXX
P:(123) 456-7890
Full Name
mailto@somedomain.com

What are Block quotes?

Block quotes

Around any HTML text you can use <blockquote> the default. Further options contain, adding a <small> tag for identifying the source of the quote and right-aligning the blockquote using class .pull-right. The following example demonstrates all these features −

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

This is a blockquote with a source title.

Someone famous inSource Title

This is a blockquote aligned to the right.

Someone famous inSource Title

What type of Lists are supported in Bootstrap?

Bootstrap supports ordered lists, unordered lists, and definition lists.

  • Ordered listsan ordered list is a list that falls in specific sort of sequential order and is prefaced by numbers.
  • Unordered listsan unordered list is a list that doesn’t have any specific order and is usually styled with bullets. You can remove the styling by using the class .list-unstyled if you do not want the bullets to appear. You can also residence all list items on a single line using the class .list-inline.
  • Definition listsin this type of list, each list item can consist of both the <dt> and the <dd> elements. <dt> stands for definition term, and like a dictionary, this is the term (or phrase) that is being defined. Subsequently, the <dd> is the definition of the <dt>. You can make terms and descriptions in <dl> line up side-by-side using class dl-horizontal.


The following example proves each of these types −

Example of Ordered List

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

Example of UnOrdered List

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

Example of Unstyled List

Item 1

Item 2

Item 3

Item 4

Example of Inline List

Item 1 Item 2 Item 3 Item 4

Example of Definition List

Description 1

Item 1

Description 2

Item 2

Example of Horizontal Definition List

Description 1

Item 1

Description 2

Item 2


All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Bootstrap Topics