Bootstrap uses typography to display headings, paragraphs and other inline elements. It sets how the contents should display on the body, background color on the body, uses font size and line height to create margins, padding’s etc. The Bootstrap provides developers with convenient typography features to make it easy for them to create headings, paragraphs, lists and other inline elements that would be appealing to the readers.
The default font stack is Helvetica Neue, Helvetica, Arial and Sans-serif. The typographic scale is based on Less variables: @font-family-base, @font-size-base and @line-height-base which creates the font name, margins, padding’s, line heights for the variables. The bootstrap comes with all the typography tags that we want styled for, everything from an <address> tag to <h1> and the whole heading hierarchy.
Bootstrap Headings
Let’s begin with headings. Consider following example with all HTML headings from h1 to h6. We will see how they will get display by using Bootstrap.
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Heading Example</h2>
<div class="container">
<h1>My Heading One</h1>
<h2>My Heading Two</h2>
<h3>My Heading Three</h3>
<h4>My Heading Four</h4>
<h5>My Heading Five</h5>
<h6>My Heading Six</h6>
</div>
</body>
</html>
Bootstrap SubHeadings
We can also add inline subheadings to any heading by using <small> tag around the elements to get smaller text with light color. Consider the following example:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Inline SubHeadings</h2>
<h1>My Heading One <small style="color:orange;">My small heading one</small></h1>
<h2>My Heading Two <small style="color:orange;">My small heading one</small></h2>
<h3>My Heading Three <small style="color:orange;">My small heading one</small></h3>
<h4>My Heading Four <small style="color:orange;">My small heading one</small></h4>
<h5>My Heading Five <small style="color:orange;">My small heading one</small></h5>
<h6>My Heading Six <small style="color:orange;">My small heading one</small></h6>
</div>
</body>
</html>
Body Copy
As we know that, Bootstrap’s default font size is 14px and line height is 1.7em. We can make HTML content with some lightweight styles. To perform this, we use class .lead which makes content with larger font size, lighter weight and taller height as shown in the following example:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Lead Body Copy Example</h2>
<p class="lead" >The Bootstrap is most popular front end framework for creating websites and web applications.
Bootstrap is a powerful front end framework which makes faster and easier web development.
It includes CSS and HTML for typography, icons, forms, buttons, tables, layout grids and other interface components, as well as optional JavaScript extensions.</p>
</div>
</body>
</html>
Emphasis
Bootstrap offers some classes that can be used to provide emphasis. We can make HTML content with some lightweight styles by using <small> tag, <strong> tag, <em> tag, etc which gives different styles to the content. Consider the following example with different styles:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Emphasis Content Example</h2>
<small>Bootstrap is a front end framework which makes faster and easier web development.</small><br><br>
<strong>Bootstrap is a front end framework which makes faster and easier web development.</strong><br><br>
<em>Bootstrap is a front end framework which makes faster and easier web development.</em><br><br>
<p class="text-primary">The Bootstrap is most popular front end framework for creating websites and web applications.</p>
<p class="text-success">The Bootstrap is most popular front end framework for creating websites and web applications.</p>
<p class="text-info">The Bootstrap is most popular front end framework for creating websites and web applications.</p>
<p class="text-warning">The Bootstrap is most popular front end framework for creating websites and web applications.</p>
<p class="text-danger">The Bootstrap is most popular front end framework for creating websites and web applications.</p>
</div>
</body>
</html>
Above script explains how to use different styles for the HTML content. It includes styles such as bold text, italic text, and small text and contains classes of notice styles such as primary, success, info, warning and danger classes.
Abbreviations
Abbreviation is a shortened form of a word or phrase. It indicates an abbreviation or an acronym like WHO, HTTP etc. We use <abbr> tag to show full version of the abbreviation or acronym when we mouse over the <abbr> element. Abbreviations are often used to save time and space. Let’s consider example for Abbreviation as shown below:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Abbreviation Example</h2>
<abbr title="World Health Organization"><strong>WHO</strong> is the directing authority for health within the United Nations System.</abbr>
</div>
</body>
</html>
Above script shows how to set abbreviation for a word or phrase. We have used the word WHO which shows an abbreviation when we mouse over the <abbr> element in the page.
Addresses
If we want to display contact information on the web page, then we could make use of address tag. It helps readers and search engines to locate physical address and phone numbers in the text. The <address> tag should not be used to describe a postal address, unless it is part of the contact information. It should not contain more information than the contact information like publication date etc. Consider following example for <address> tag:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Address Example</h2>
<address>
<strong>MVN Industries</strong><br>
#111, 12th main, 4th cross <br>
Vijay Nagar, Belagum, Karnataka-591103<br>
India<br><br>
<span class="glyphicon glyphicon-earphone"></span>
Call us at:(0831) 234-8678 <br><br>
<span class="glyphicon glyphicon-envelope"></span>
Email:support@mvn.com <br><br>
<span class="glyphicon glyphicon-time"></span>
Monday - Saturday 10:00 AM to 7:00 PM<br><br>
</address>
</div>
</body>
</html>
As shown in the script, address tag is used to display contact information on the web page. We have used glyphicons to set icon for time, email and phone. Glyphicons are monochromatic icons and symbols created with an emphasis on simplicity and easy orientation. The icon classes cannot be combined directly with other components. We couldn’t use with other classes; instead we can use with span and apply icon classes to the span.
Blockquotes
Blockquote is a tag used to define long quotations. It tells browser or user agent that contents are long quotation. It contains only block level elements within it, not just plain text. Most of the web browsers add some spaces to the both sides of the quotation to make it stand out from the surrounding text.
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Blockquote Example</h2>
<blockquote><p>The Bootstrap is most popular front end framework for creating websites and web applications.
Bootstrap is a powerful front end framework which makes faster and easier web development.
It includes CSS and HTML for typography, icons, forms, buttons, tables, layout grids and other interface components, as well as optional JavaScript extensions.</p>
</blockquote>
<blockquote><p>The Bootstrap is most popular front end framework for creating websites and web applications.
Bootstrap is a powerful front end framework which makes faster and easier web development.</p>
<small>This is about <cite title="Source Title">Bootstrap Blockquote</cite></small>
</blockquote>
<blockquote class="pull-right">The Bootstrap is most popular front end framework for creating websites and web applications.
Bootstrap is a powerful front end framework which makes faster and easier web development.</p>
<small>This is about <cite title="Source Title"> right aligned blockquote</cite></small>
</blockquote>
</div>
</body>
</html>
As shown in the above script, the <blockquote> tag is used to indicate a substantial portion of the quoted text. It must contain at least one high level element or a list. Include an optional <small> tag to identify the source of the quote and add the source’s name wrapped in <cite> tag before closing the small tag. If we want Blockquote to be right aligned, add .pull-right class to the tag. Then the entire blockqoute is floated to the right.
Lists
Bootstrap supports and styling for the three main list types: Ordered, Unordered and Definition lists.
- Ordered: It is typically numbered list of items that have a specific numerical ordering or ranking. We use <ol> tag to create numbered list with starting at 1. Each list item starts with the <li> tag.
- Unordered: We use <ul> tag to create list with bullets instead of numbers. Each list item starts with the <li> tag.
- Definition list: Definition list are for lists of term/definition pairs. It differs from both ordered and unordered list instead of having block level <li> element, each list item consists of <dt> and <dd> elements. The dt stands for definition term and dd defines definition of the term.
Consider the following example with above three lists:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" type="text/css" href="myclass.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Ordered List</h2>
<ol>
<li>Cricket</li>
<li>Football</li>
<li>Hockey</li>
<li>Snooker</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Cricket</li>
<li>Football</li>
<li>Hockey</li>
<li>Snooker</li>
</ul>
<h2>Unstyled List</h2>
<ul class="list-unstyled">
<li>Cricket</li>
<li>Football</li>
<li>Hockey</li>
<li>Snooker</li>
</ul>
<h2>Definition List</h2>
<dl>
<dt>HTTP</dt>
<dd>- Hypertext Transfer Protocol</dd>
<dt>WWW</dt>
<dd>- World Wide Web</dd>
</dl>
<h2>Horizontal Definition List</h2>
<dl class="dl-horizontal">
<dt>HTTP</dt>
<dd>- Hypertext Transfer Protocol</dd>
<dt>WWW</dt>
<dd>- World Wide Web</dd>
</dl>
</body>
</html>
Above script explains about different types of lists. We could see that, we have used one more list i.e. Definition list with horizontal which display content horizontally. It defines terms and descriptions side by side.
Bootstrap Grid System