Bootstrap framework uses Helvetica Neue, Helvetica, Arial, and sans-serif in it's default font stack. Using the typography feature of Bootstrap, you can create paragraphs, lists, headings and other inline elements. Let us study about each of these elements in the following sections.
Headings
Example
<h1>I'm Heading1 h1</h1> <h2>I'm Heading2 h2</h2> <h3>I'm Heading3 h3</h3> <h4>I'm Heading4 h4</h4> <h5>I'm Heading5 h5</h5> <h6>I'm Heading6 h6</h6>
Output
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
Example
<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1> <h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2> <h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3> <h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4> <h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5> <h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>
Output
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
Example
<h2>Lead Example</h2> <p class = "lead">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.</p>
Output
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
Example
<small>This content is within tag</small><br> <strong>This content is within tag</strong><br> <em>This content is within tag and is rendered as italics</em><br> <p class = "text-left">Left aligned text.</p> <p class = "text-center">Center aligned text.</p> <p class = "text-right">Right aligned text.</p> <p class = "text-muted">This content is muted</p> <p class = "text-primary">This content carries a primary class</p> <p class = "text-success">This content carries a success class</p> <p class = "text-info">This content carries a info class</p> <p class = "text-warning">This content carries a warning class</p> <p class = "text-danger">This content carries a danger class</p>
Output
This content is within tag
This content is within tag
This content is within tag and is rendered as italicsLeft 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
Abbreviations
Example
<abbr title = "World Wide Web">WWW</abbr><br> <abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>
Output
WWW
RSS
Addresses
Example
<address> <strong>Some Company, Inc.</strong><br> 007 street<br> Some City, State XXXXX<br> <abbr title = "Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href = "mailto:#">mailto@somedomain.com</a> </address>
Output
Some Company, Inc.
007 street
Some City, State XXXXX
P: (123) 456-7890Full Name
mailto@somedomain.com
Blockquotes
Example
<blockquote> <p>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.</p> </blockquote> <blockquote> This is a blockquote with a source title. <small>Someone famous in <cite title = "Source Title">Source Title</cite></small> </blockquote> <blockquote class = "pull-right">This is a blockquote aligned to the right. <small>Someone famous in <cite title = "Source Title">Source Title</cite></small> </blockquote>
Output
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 in Source TitleThis is a blockquote aligned to the right.Someone famous in Source Title -
Lists
- Ordered lists - An ordered list is a list that falls in some sort of sequential order and is prefaced by numbers.
- Unordered lists - An unordered list is a list that doesn't have any particular order and is traditionally styled with bullets. If you do not want the bullets to display, you can remove the styling by making use of .list-unstyled class. You can also place all list items on a single line using the .list-inline class.
- Definition lists - In this type of list, each of the list item consists of both the <dt> and <dd> elements. <dt> is an acronym for definition term, and like a dictionary, this is the term that is being defined. Subsequently <dd> is the definition of <dt>.
Example
<h4>Example of Ordered List</h4> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol> <h4>Example of UnOrdered List</h4> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>Example of Unstyled List</h4> <ul class = "list-unstyled"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>Example of Inline List</h4> <ul class = "list-inline"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>Example of Definition List</h4> <dl> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl> <h4>Example of Horizontal Definition List</h4> <dl class = "dl-horizontal"> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl>
Output
Example of Ordered List
- Item 1
- Item 2
- Item 3
- 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
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.