Bootstrap
In this tutorial we will learn typograph in Bootstrap.
Bootstrap's global default font-size is 14px, with a line-height of 1.428.
This is applied to the body and all paragraphs. In addition, paragraphs receive a bottom margin of half their computed line-height i.e., 10px by default.
body
In the following example we have a sample paragraph.
<p>The quick brown fox jumps over the lazy dog</p>
To create headings we can use all the heading tags from h1 to h6.
h1
h6
In the following example we have the different heading tags.
<h1>Heading h1 - semibold 36px</h1> <h2>Heading h2 - semibold 30px</h2> <h3>Heading h3 - semibold 24px</h3> <h4>Heading h4 - semibold 18px</h4> <h5>Heading h5 - semibold 14px</h5> <h6>Heading h6 - semibold 12px</h6>
Output
To create lighter secondary text in Bootstrap we using the small tag.
small
In the following example we have the headings and secondary texts.
<h1>Heading h1 - <small>secondary text</small></h1> <h2>Heading h2 - <small>secondary text</small></h2> <h3>Heading h3 - <small>secondary text</small></h3> <h4>Heading h4 - <small>secondary text</small></h4> <h5>Heading h5 - <small>secondary text</small></h5> <h6>Heading h6 - <small>secondary text</small></h6>
To make a paragraph standout we use the lead class.
lead
<p class="lead">The quick brown fox jumps over the lazy dog</p>
We use the mark tag to highlight a text.
mark
<p>The quick brown <mark>fox</mark> jumps over the lazy dog</p>
We use the del tag to highlight a piece of deleted text.
del
<p>The quick brown <del>fox</del> jumps over the lazy dog</p>
We use the s tag to highlight a piece of text that is no longer relevant.
s
<p>The quick brown <s>fox</s> jumps over the lazy dog</p>
ins
<p>The quick brown <ins>fox</ins> jumps over the lazy dog</p>
u
<p>The quick brown <u>fox</u> jumps over the lazy dog</p>
<p>The quick brown <small>fox</small> jumps over the lazy dog</p>
strong
<p>The quick brown <strong>fox</strong> jumps over the lazy dog</p>
em
<p>The quick brown <em>fox</em> jumps over the lazy dog</p>
To align a text at the center we use the .text-center class.
.text-center
To align a text at the left side we use the .text-left class.
.text-left
To align a text at the right side we use the .text-right class.
.text-right
To justify text we use the .text-justify class.
.text-justify
If we don't want to wrap the text we use the .text-nowrap class.
.text-nowrap
<p class="text-center">The quick brown fox jumps over the lazy dog</p> <p class="text-left">The quick brown fox jumps over the lazy dog</p> <p class="text-right">The quick brown fox jumps over the lazy dog</p> <p class="text-justify">The quick brown fox jumps over the lazy dog</p> <p class="text-nowrap">The quick brown fox jumps over the lazy dog</p>
To convert the text into lowercase we use the .text-lowercase class.
.text-lowercase
To convert the text into uppercase we use the .text-uppercase class.
.text-uppercase
To convert the text into capitalize we use the .text-capitalize class.
.text-capitalize
<p class="text-lowercase">The quick brown fox jumps over the lazy dog</p> <p class="text-uppercase">The quick brown fox jumps over the lazy dog</p> <p class="text-capitalize">The quick brown fox jumps over the lazy dog</p>
We use the ul tag to create unordered list and li tag to add list items.
ul
li
<ul> <li>Apple</il> <li>Mango</il> <li>Orange</il> </ul>
We use the ol tag to create ordered list.
ol
<ol> <li>Apple</il> <li>Mango</il> <li>Orange</il> </ol>
To highlight a snippet of code we use the code tag.
code
<code>var name = "Yusuf Shakeel";</code>
To highlight keyboard input we use the kbd tag.
kbd
<kbd>Ctrl + A</kbd>
To highlight variable we use the var tag.
var
<var>y</var> = <var>x</var> + 10
The complete list of typography is on Bootstrap offical website.