Bootstrap Tutorial

Bootstrap Typography

Bootstrap typography feature are create headings, paragraphs, lists and other inline text elements, alignment classes, abbreviations, Addresses and blackquotes. Let see learn each one of these in the following sections.

Headings :

Bootstrap headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available. An example is shown below.

<h1>Bootstrap heading 1</h1>
<h2>Bootstrap heading 2</h2>
<h3>Bootstrap heading 3</h3>
<h4>Bootstrap heading 4</h4>
<h5>Bootstrap heading 5</h5>
<h6> Bootstrap heading 6</h6>

Output :

Bootstrap heading 1

Bootstrap heading 2

Bootstrap heading 3

Bootstrap heading 4

Bootstrap heading 5

Bootstrap heading 6

Inline Subheadings :

To add an inline subheading to any of the headings, simply add <small> around any of the elements or add .small class

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Inline Subheadings</title>

</head>

<body>

<h1>Bootstrap heading h1. <small>secondary heading1 h1</small></h1>

<h2>Bootstrap heading h2. <small>secondary heading2 h2</small></h2>

<h3>Bootstrap heading h3. <small>secondary heading3 h3</small></h3>

<h4>Bootstrap heading h4. <small>secondary heading4 h4</small></h4>

<h5>Bootstrap heading h5. <small>secondary heading5 h5</small></h5>

<h6>Bootstrap heading h6. <small>secondary heading1 h6</small></h6>

</body>

</html>

Output :

Bootstrap heading h1. secondary heading1 h1

Bootstrap heading h2. secondary heading2 h2

Bootstrap heading h3. secondary heading3 h3

Bootstrap heading h4. secondary heading4 h4

Bootstrap heading h5. secondary heading5 h5

Bootstrap heading h6. secondary heading1 h6

Lead body copy :

Make a paragraph stand out by adding ( .lead ) class. this class is a larger font size, lighter weight, and a taller line height as in the following example :

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Lead body copy</title>

</head>

<body>

<h2>Lead body copy Example</h2>

<p class = "lead">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>

</body>

</html>

Output :

Lead body copy Example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Inline text elements :

Bootstrap inline text element are <mark>, <del>, <s>, <ins>, <u>, <small>, <strong>, <em> in the following way:

<!DOCTYPE html>

<html>

<head>

<title>Inline text elements</title>

</head>

<body>

<h4>Marked text</h4>

<p>Use the mark element to <mark>highlight</mark> text.</p>

<h4>Deleted text</h4>

<del>This line of text is meant to be treated as deleted text.</del>

<h4>Strikethrough text</h4>

<s>This line of text is meant to be treated as no longer accurate.</s>

<h4>Inserted text</h4>

<ins>This line of text is meant to be treated as an addition to the document.</ins>

<h4>Underlined text</h4>

<u>This line of text will render as underlined</u>

<h4>Small text</h4>

<small>This line of text is meant to be treated as fine print.</small>

<strong>rendered as bold text</strong>

<h4>Italics</h4>

<em>rendered as italicized text</em>

</body>

</html>

Output :

Marked text

Use the mark element to highlight text.

Deleted text

~~This line of text is meant to be treated as deleted text.~~

Strikethrough text

~~This line of text is meant to be treated as no longer accurate.~~

Inserted text

This line of text is meant to be treated as an addition to the document.

Underlined text

This line of text will render as underlined

Small text

This line of text is meant to be treated as fine print.

Bold

rendered as bold text

Italics

rendered as italicized text

Alignment classes :

The following text alignment classes.

<!DOCTYPE html>
<html>
<head>
   <title>Alignment classes</title>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
   <script src="js/bootstrap.min.js"></script>
</head>
<body>
 
<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-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
 
</body>
</html>

Output :

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

Abbreviations :

The HTML element provides markup for abbreviations or acronyms, like WWW or HTTP. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.

<!DOCTYPE html>
<html>
<head>
   <title>Abbreviations</title>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
   <script src="js/bootstrap.min.js"></script>
</head>
<body>
 
<abbr title="Hyper Text Markup Language">HTML</abbr><br>
<abbr title="Cascading Style Sheet">CSS</abbr><br>
<abbr title="World Wide Web">WWW</abbr>
 
</body>
</html>

Output :

HTML
CSS
WWW

Addresses Tag :

Using <address> tag you can display the contact information on your web page.

<!DOCTYPE html>
<html>
<head>
   <title>Address</title>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
   <script src="js/bootstrap.min.js"></script>
</head>
<body>
 
<address>
  <strong>Free Time Learning.</strong><br>
  Gudur, Nellore<br>
  Andhra Pradesh, India, PIN :524410<br>
  <abbr title="Phone">Ph:</abbr> +919963666068
</address>
 
<address>
  <strong>Email :</strong><br>
  <a href="mailto:info@freetimelearning.com">
    info@freetimelearning.com
  </a>
</address>
</body>
</html>

Output :

Free Time Learning.
Gudur, Nellore
Andhra Pradesh, India, PIN :524410
Ph: +919963666068

Email :
info@freetimelearning.com

Blackquotes Tag :

Bootstrap will style the HTML <blockquote> element in the following way:

<!DOCTYPE html>
<html>
<head>
   <title>Blackquote</title>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
   <script src="js/bootstrap.min.js"></script>
</head>
<body>
 
<blockquote>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s.
</p>
</blockquote>
</body>
</html>

Output :

Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Lists :

Bootstrap supports ordered lists, unordered lists, and definition lists in the following way :

<!DOCTYPE html>
<html>
<head>
   <title>Lists</title>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <script src="js/jquery.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
</head>
<body>
 
<h4>Ordered List</h4>
<ol>
   <li>Sample text 1</li>
   <li>Sample text 2</li>
   <li>Sample text 3</li>
</ol>
 
<h4>UnOrdered List</h4>
 
<ul>
   <li>Sample text 1</li>
   <li>Sample text 2</li>
   <li>Sample text 3</li>
</ul>
 
<h4>Unstyled List</h4>
 
<ul class = "list-unstyled">
   <li>Sample text 1</li>
   <li>Sample text 2</li>
   <li>Sample text 3</li>
</ul>
 
<h4>Example of Definition List</h4>
 
<dl>
   <dt>Description 1</dt>
   <dd>Sample text 1</dd>
   <dt>Description 2</dt>
   <dd>Sample text 2</dd>
</dl>
 
</body>
</html>

Output :

Ordered List

Sample text 1
Sample text 2
Sample text 3

UnOrdered List

Sample text 1
Sample text 2
Sample text 3

Unstyled List

Sample text 1
Sample text 2
Sample text 3

Example of Definition List

Description 1: Sample text 1
Description 2: Sample text 2

Bootstrap Tutorial