saftutorials.com
Bootstrap Typography

Bootstrap Typography is most important for Bootstrap. Bootstrap all HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available Bootstrap CSS, for when you want to match the font styling of a heading but still want your text to be displayed inline.

Heading

<h1>-<h6>

Example

h1. Bootstrap heading
Semibold 36px
h2. Bootstrap heading
Semibold 30px
h3. Bootstrap heading
Semibold 24px
h4. Bootstrap heading
Semibold 18px
h5. Bootstrap heading
Semibold 14px
h6. Bootstrap heading
Semibold 12px
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Body Copy

Bootstrap's default font-size is 14px, line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

<p>Bootstrap Paragraph</p>

Inline text elements

Marked Text <mark>

For highlighting text due to its relevance in another context, use the <mark> tag.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit.


Deleted Text <del>

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<del>This makes a specific text del</del>


Small Text <small>

Example

Create secondary text in any heading with a generic <small> tag or the .small class. 

<small>This makes a smaller text</small>


h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text


Strikethrough text <s>

For indicating blocks of text that are no longer relevant use the <s> tag.

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

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


Inserted text <ins>

For indicating additions to the document using the <ins> tag.

<ins>Bootstrap ins tag.</ins>

Bootstrap ins tag


Underlined text <u>

To underline text use the <u> tag.

<u>This line of text underlined</u>

This line of text underlined


Bold Text <b>

For emphasizing a snippet of text with a heavier font-weight.

The following snippet of text is rendered as bold text.

<b>This text bold</b>
<strong>rendered as bold text</strong>


Italic Text <i>

It's makes a text line Italic using <i>.

<i>This line is italic</i>

This line is italic

<em>rendered as italicized text</em>

<em> also makes a text italic.


Alignment classes


Example

Text Aligned Left
Text Aligned Center
Text Aligned Right
Text Aligned Justify
No Wrap text
<p class="text-left">For Left aligned text.</p>
<p class="text-center">For Center aligned text.</p>
<p class="text-right">For Right aligned text.</p>
<p class="text-justify">For Justified text.</p>
<p class="text-nowrap">For No wrap text.</p>


Transform classes

Example

lowercased text class.

UPPERCASED TEXT CLASS.

Capitalized Text Class.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>


Abbreviations <abbr>

Basic abbreviation

Example

An abbreviation of the word attribute is <abbr title="attribute">attr.</abbr>

An abbreviation of the word attribute is attr


Address

Example
<address>
  <strong>Saf Tutorials.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">info@domain.com</a>
</address>
Saf Tutorials.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
info@domain.com


Blockquotes

Example

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Blockquotes with Footer

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title


Lists

Order List

<ol>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item
  6. List Item
  7. List Item
  8. List Item
  9. List Item


Unorder List

<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item


Description

A list of terms with their associated descriptions.

<dl>
  <dt>Description Title</dt>
  <dd>Long Description type or write here...</dd>
</dl>

Description Title
Long Description type or write here...


Horizontal description

<dl class="dl-horizontal">
  <dt>A description list is perfect for defining terms</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.</dd>
</dl>

A description list is perfect for defining terms
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.


Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic