Typography
Headings:
As in bootstrap we have the following fonts that are provided by default:
- Helvetica Neue
- Helvetica
- Arial
- Sans-serif
The headings of html that are h1 to h6 are styled in bootstrap. Consider the following code in which we have used all the headings (h1 to h6) of HTML:
CODE:
<! DOCTYPE html >
<html>
<head>
<title> Bootstrap Example < /title >
<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<scriptsrc=”/scripts/jquery.min.js”></script>
<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<h1>Heading1 h1</h1>
<h2>Heading2 h2</h2>
<h3>Heading3 h3</h3>
<h4>Heading4 h4</h4>
<h5>Heading5 h5</h5>
<h6>Heading6 h6</h6>
</body>
</html>
This code will generate the following result:
OUTPUT:
Inline Subheadings:
In bootstrap we can add a subheading to a main heading. This can be done by using the < small> tag inside any of the heading tag to which we want to include a subheading. We can also use .small class to add a subheading to a heading. When we use the .small class or <small > tag a smaller text of lighter color will be shown along with the main heading; this text will be considered as the subheading. Consider the following code in which we have added the subheadings along with each heading of html (h1 to h6) by using <small > tag:
CODE:
<! DOCTYPE html >
<html>
<head>
<title> Bootstrap Example < /title >
<linkhref = “/ bootstrap / css / bootstrap. min. css” rel = “stylesheet” >
<scriptsrc = “/ scripts / jquery. min. js” ></ script >
<scriptsrc = “/ bootstrap / js/ bootstrap. min. js” >< /script >
< /head >
<body>
< h1 > Heading1 h1 < small > Subheading 1 < /small >< /h1 >
< h2 > Heading2 h2 < small >Subheading 2< /small >< /h2 >
< h3 > Heading3 h3 < small >Subheading 3< /small >< /h3 >
< h4 > Heading4 h4 < small >Subheading 4< /small >< / h4 >
< h5 > Heading5 h5 < small >Subheading 4< /small >< /h5 >
< h6 > Heading6 h6 < small >Subheading 6< /small >< /h6 >
< /body >
</ html>
This code will generate the following result:
OUTPUT:
Lead Body Copy:
We can add an emphasis on any of the paragraph; this can be done if we use the class “lead” inside the <p> (paragraph) tag. Doing this will increase the size of the font of paragraph. Consider the following code in which we have added the lead class inside the <p> tag to emphasis on the paragraph:
CODE:
<! DOCTYPE html >
<html>
<head>
<title> Bootstrap Example < /title >
<linkhref = “/ bootstrap / css / bootstrap. min. css” rel = “stylesheet” >
<scriptsrc = “/ scripts/ jquery. min. js” >< /script >
<scriptsrc = “/ bootstrap / js/ bootstrap. min. js” >< /script >
</ head >
<body>
< h2 > Example of Lead </ h2 >
<p class = “lead” > In Colorado there are different snows each year. In a good years snow there are no skiing problems as well as no water problems. But if the snow is bad, it can affect the industry of ski, it can also affect the waters of that land. Around the world water is obtained by drilling deep holes in the ground and then it is connected with an electric motor. < /p >
</ body >
</ html>
This code will generate the following result:
OUTPUT:
Consider the following image in which it is shown that if we did not use the lead class what our paragraph would look like:
It can be seen here that the paragraph in which we used the lead class looks lighter and has a larger font size as compared to the simple paragraph.
Emphasis:
In html we have certain emphasis tags for example <small> is used to set the text 85% of more size than the actual set or the parent set, the < strong> tag is used to make the text more heavy and another tag that is <em> is used to make text in italics. In bootstrap we have classes that are used to emphasize on text.
Consider the following example in which we have used the bootstrap classes to emphasis on the text:
CODE:
<! DOCTYPE html >
<html>
<head>
<title> Bootstrap Example < /title >
<linkhref = “/ bootstrap / css/ bootstrap . min. css” rel = “stylesheet” >
<scriptsrc = “/ scripts/ jquery. min. js” ></ script >
<scriptsrc = “/ bootstrap/ js / bootstrap. min. js” >< /script >
< /head >
<body>
<small> Content with small tag < /small ><br>
<strong> Content with strong tag < / strong ><br>
<em> Content with em tag being italicized < /em><br>
<p class = “text- left” > Text at Left Side < /p >
<p class = “text- center” > Text at Center < /p >
<p class = “text- right” > Text at Right Side </p >
<p class = “text- muted” > Muted Content using mute class < /p >
<p class = “text- primary” > Primary Content using primary class < /p >
<p class = “text- success” > Success Content using success class < /p>
<p class = “text- info” > Informative Content using info class < /p >
<p class = “text- warning” > Warning using warning class < /p >
<p class = “text- danger” > Dangerous Content using danger class < /p >
< / body >
</ html>
This code will generate the following result:
OUTPUT:
In the above example, first we used the basic default tags of html of emphasis that are small, strong and em. Then we have used the bootstrap classes inside the <p> tag. The class text-left is used to align the text to the left side of the page, the class text-right is used to align the text to right side of the page, the class center-text is used to center align the text. In the image above it can be seen that there is text of different class. The text in grey color is the muted text which is muted by using the text-muted class, and then we have primary text which is done by text-primary and so on.
Abbreviations:
We have an html tag which is used to show the abbreviations or acronyms, etc. Abbreviations such as HTTP, www, etc., this tag are <abbr> which underlines the abbreviation with a dotted line. Consider the following example in which we have used the abbreviation tag:
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<scriptsrc=”/scripts/jquery.min.js”></script>
<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<abbr title = “Automated Teller Machine” > ATM < /abbr><br>
</body>
</html>
The above code will generate the following result:
OUTPUT:
Addresses:
The address element of html written as <address> is used to display the address of someone, or some company, etc. to the webpage.
Consider the following example in which we have used the < address> tag to add an address and <br> tag which is used to add a line break:
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<scriptsrc=”/scripts/jquery.min.js”></script>
<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<address>
<strong>Name of Company, Inc.</strong><br>
Street No. 4<br>
Name of City, Name of state<br>
<abbr title = “PhoneNo.”>PNo.:</abbr> (051) 523-2456
</address>
<address>
<strong>Name</strong><br>
<ahref = “asd”> [email protected] < /a>
</address>
</body>
</html>
The above code will generate the following result:
OUTPUT:
In the above example, along with the address element we used strong tag and br tag to add more meaning to the address. The tag <br> is sued to generate a new line and <strong> is used to add emphasis on the text.
Blockquotes:
The Blockquote element is used to define or mark a text that is quoted from another website or any other source or an extract from a book. In an HTML document the blockquote is indented that is the text is justified. It is used to simply highlight a text or block of text. A blockquote is also used to introduce text indentations.
The blockquote element is often used to highlight a text. The blockquote element can contain the following elements; address, form, pre, etc. This element do not supports any attributes.
To illustrate the usage of blockquote consider the following example:
CODE:
<html>
<body>
<p>Blockquote is used to indent the text</p>
<blockquote>
Three things cannot be long hidden:
the sun, the moon, and the truth.
</blockquote>
</body>
</html>
Let us see what happens when we save this example as an HTML document:
In the above example we can see the text we entered is automatically aligned. As a proof, see that we wrote the quotation is two separate lines as
Three things cannot be long hidden:
the sun, the moon, and the truth.
And the browser itself aligned it and writes it in one line in the middle of the HTML document.
Lists:
In bootstrap we have three types of lists that are ordered list, unordered list and definition list.
Ordered List:
An ordered list is the one which has a definite order or which is in a sequence. The ordered list is listed with number.
Unordered List:
An unordered list is the one that has no order or which is not in a sequence. The unordered list is listed by using bullets. The bullets from an unordered list can be removed by using .list- unstyled class of bootstrap. The items of the unordered list can also be written in one same line by using the .list-inline class.
Definition List:
The items of the definition list can have two tags that are <dt> and <dd>. The tag <dt> is used to define a term, dt stands for definition term. The tag <dd> is used to define the tag <dt>. The terms can be made by using the tag <dl> and by using the class dl- horizontal.
Consider the following example in which we have used the ordered list:
CODE:
<! DOCTYPE html >
<html>
<head>
<title> Bootstrap Example < /title >
<linkhref = “/ bootstrap / css / bootstrap. min. css ” rel = “stylesheet” >
<scriptsrc = “/ scripts / jquery. min. js” >< / script >
<scriptsrc = “/ bootstrap / js / bootstrap. min. js” >< /script >
< / head >
<body>
< h3 > Ordered List of Items < /h3 >
<ol>
<li> Item number 1 < /li >
<li> Item number 2 </ li >
<li> Item number 3 < /li >
<li> Item number 4 </ li >
</ ol>
< /body >
</ html>
The above code will generate the following result:
OUTPUT:
It can be seen in the above example that we have used the tag of ordered list and list of items are numbered sequentially. The <li> tag is the list tag used to initialize a list. The <ol> tag is the ordered list tag.
Consider the following example in which we have used the unordered list tag to generate an unordered list of elements:
CODE:
<! DOCTYPE html >
<html>
<head>
<title> Bootstrap Example < / title >
<linkhref = ” / bootstrap/ css/ bootstrap. min. css” rel = “stylesheet” >
<scriptsrc = “/ scripts/ jquery. min. js” ></ script >
<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<h3>UnOrdered List of Items</h3>
<ul>
<li>Item No. 1</li>
<li>Item No. 2</li>
<li>Item No. 3</li>
<li>Item No. 4</li>
</ul>
</body>
</html>
This code will generate the following result:
OUTPUT:
It can be seen in the above example that we have used the tag of unordered list and list of items are not numbered sequentially rather bullets are used. The <li> tag is the list tag used to initialize a list. The <ul> tag is the unordered list tag.
Consider the following example in which we have used the unstyled list tag to remove bullets from the unordered list of items:
CODE:
<! DOCTYPE html >
<html>
<head>
<title> Bootstrap Example < / title >
<linkhref = “/ bootstrap / css / bootstrap. min. css” rel = “stylesheet” >
<scriptsrc = “/ scripts / jquery. min. js” >< / script >
<scriptsrc = “/ bootstrap / js/ bootstrap. min. js” >< / script >
< /head >
<body>
< h3 >Unstyled List of items < /h3 >
<ul class = “list-unstyled” >
<li> Item No. 1 < /li >
<li> Item No. 2 </ li >
<li> Item No. 3 </ li >
<li> Item No. 4 </ li >
</ ul>
</ body >
</ html>
This code will generate the following result:
OUTPUT:
In the above example it can be seen that the bullets from the unordered list of items are removed.
Consider the following example in which we have used the inline list of items:
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<scriptsrc=”/scripts/jquery.min.js”></script>
<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<h3>Inline List of items</h3>
<ul class = “list-inline”>
<li>Item No. 1</li>
<li>Item No. 2</li>
<li>Item No. 3</li>
<li>Item No. 4</li>
</ul>
</body>
</html>
The above code will generate the following result:
OUTPUT:
The inline tag is used to make the list in a single line. It can be seen in the above example that our list is in a single line.
Consider the following example in which the definition list is produced:
CODE:
<! DOCTYPE html >
<html>
<head>
<title> Bootstrap Example < /title >
<linkhref = ” /bootstrap /css /bootstrap. min. css” rel = “stylesheet” >
<scriptsrc = “/ scripts / jquery. min. js” >< / script >
<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>
</head>
<body>
<h3>Definiton List</h3>
<dl>
<dt>Description of item No. 1</dt>
<dd>Item No. 1</dd>
<dt>Description of item No. 2</dt>
<dd>Item No. 2</dd>
</dl>
</body>
</html>
The above code will generate the following result:
OUTPUT:
In the above example the <dd> is used to define the <dt> tag and <dl> tag is used to declare the definition list.
Consider the following example in which we have horizontal definition list:
CODE:
<! DOCTYPE html >
<html>
<head>
<title> Bootstrap Example </ title >
<linkhref = “/ bootstrap / css/ bootstrap. min. css” rel = “stylesheet” >
<scriptsrc = “/ scripts/ jquery. min. js” ></ script >
<scriptsrc = “/ bootstrap /js / bootstrap. min. js” >< /script >
</ head >
<body>
< h3 > Horizontal Definition List of items < /h3 >
<dl class = “dl-horizontal” >
<dt> Description of Item No. 1 < /dt>
<dd> Item No. 1 </ dd>
<dt> Description of Item No. 2 < /dt>
<dd> Item No. 2 </ dd>
< /dl >
</ body >
</ html>
The above code will generate the following result:
OUTPUT:
