Bootstrap - Typography
Bootstrap
In this tutorial we will learn typograph in Bootstrap.
Body
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.
In the following example we have a sample paragraph.
<p>The quick brown fox jumps over the lazy dog</p>
Headings
To create headings we can use all the heading tags from h1 to 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
Headings with lighter secondary text
To create lighter secondary text in Bootstrap we using the small tag.
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>
Output
lead class
To make a paragraph standout we use the lead class.
<p class="lead">The quick brown fox jumps over the lazy dog</p>
Output
Inline text element
Marked text
We use the mark tag to highlight a text.
<p>The quick brown <mark>fox</mark> jumps over the lazy dog</p>
Output
Deleted text
We use the del tag to highlight a piece of deleted text.
<p>The quick brown <del>fox</del> jumps over the lazy dog</p>
Output
Strikethrough text
We use the s tag to highlight a piece of text that is no longer relevant.
<p>The quick brown <s>fox</s> jumps over the lazy dog</p>
Output
Some more tags
| Tags | Purpose |
|---|---|
ins | Inserted text To indicate additional text in the document we use the ins tag. |
u | Underlined text To uderline text we use the u tag. |
small | Small text To de-emphasizing inline or blocks of text we use the small tag. It sets the size to 85% of the parent. |
strong | Bold text We use the strong tag to emphasize a text with a heavier font-weight. |
em | Italic text We use the em tag to emphasize a text with italics. |
Alignment
To align a text at the center we use the .text-center class.
To align a text at the left side we use the .text-left class.
To align a text at the right side we use the .text-right class.
To justify text we use the .text-justify class.
If we don't want to wrap the text we use the .text-nowrap class.
<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>
Transform
To convert the text into lowercase we use the .text-lowercase class.
To convert the text into uppercase we use the .text-uppercase class.
To convert the text into capitalize we use the .text-capitalize class.
<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>
Output
Unordered list
We use the ul tag to create unordered list and li tag to add list items.
<ul>
<li>Apple</il>
<li>Mango</il>
<li>Orange</il>
</ul>
Ordered list
We use the ol tag to create ordered list.
<ol>
<li>Apple</il>
<li>Mango</il>
<li>Orange</il>
</ol>
Code
To highlight a snippet of code we use the code tag.
<code>var name = "Yusuf Shakeel";</code>
Keyboard input
To highlight keyboard input we use the kbd tag.
<kbd>Ctrl + A</kbd>
Variable
To highlight variable we use the var tag.
<var>y</var> = <var>x</var> + 10
The complete list of typography is on Bootstrap offical website.