Headings

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading
<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>

Paragraphs

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

<!-- Make a paragraph stand out by adding class="text-lead" -->
<p class="text-lead">Lorem Ipsum ... </p>

<!-- Simple Paragraphs -->
<p>Lorem Ipsum ... </p>
<p>Lorem Ipsum ... </p>

Blockquotes

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

Excellence is an art won by training and habituation.

We do not act rightly because we have virtue or excellence, but we rather have those because we have acted rightly.

We are what we repeatedly do. Excellence, then, is not an act but a habit.

Aristotle - Aristotle Quotes

Blockquote with a side quote icon:

In the practice of tolerance, one's enemy is the best teacher.

Dalai Lama

Blockquote with a top quote icon:

It's not the customers job to know what they want.

Steve Jobs – Apple Worldwide Developers Conference

<!-- Single line blockquote -->
<blockquote>
    <p>Stay hungry. Stay foolish.</p>
</blockquote>

<!-- Multi line blockquote with a cite reference -->
<blockquote>
    <p>Excellence is an ... </p>
    <p>We do not act rightly ... </p>
    <p>We are what we ... </p>
    <p><cite><a href="http://url" target="_blank">Aristotle</a> - Aristotle Quotes</cite></p>
</blockquote>

<!-- Blockquote with a side quote icon - use class="quote-side" -->
<blockquote class="quote-side"> ... </blockquote>

<!-- Blockquote with a top quote icon - use class="quote-top" -->
<blockquote class="quote-top"> ... </blockquote>

<!-- Blockquote with a primary background - use class="bg-primary" -->
<blockquote class="bg-primary"> ... </blockquote>

Lists

Default Unordered List

  • List item one
  • List item two
    • List item one
    • List item two
      • List item one
      • List item two
      • List item three
      • List item four
    • List item three
  • List item three
  • List item four
  • List item fife

Default Ordered List

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

Styled Unordered List

  • List item one
  • List item two
    • List item one
    • List item two
      • List item one
      • List item two
      • List item three
      • List item four
    • List item three
  • List item three
  • List item four
  • List item fife

Styled Ordered List

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

Styled List

  • List item one
  • List item two
  • List item three
  • List item four

Unstyled List

  • List item one
  • List item two
  • List item three
  • List item four
  • List item fife
  • List item six
<-- Default Unordered List -->
<ul>
    <li> ... </li>
</ul>

<-- Default Ordered List -->
<ol>
    <li> ... </li>
</ol>

<-- Styled Unordered List - use class="styled-ul" -->
<ul class="styled-ul">
    <li> ... </li>
</ul>

<-- Styled Ordered List - use class="styled-ol" -->
<ul class="styled-ol">
    <li> ... </li>
</ul>

<-- Styled List - use class="styled-list" -->
<ul class="styled-list">
    <li> ... </li>
</ul>

<-- Unstyled List - use class="clear-list" -->
<ul class="clear-list">
    <li> ... </li>
</ul>

Icon List

  • North Adella
  • North Adella
  • North Adella
  • North Adella
  • North Adella

Description

Definition List Title
Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly will explain this one.
<dl>
    <dt>Definition List Title</dt>
    <dd>Definition list division.</dd>
    ...
</dl>

Horizontal Description

Definition List Title
Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly will explain this one.
<dl class="dl-horizontal">
    <dt>Definition List Title</dt>
    <dd>Definition list division.</dd>
    ...
</dl>

Tables

Table

Employee Salary
John Doe $1 Because that’s all Steve Jobs needed for a salary.
Jane Doe $100K For all the blogging she does.
Fred Bloggs $100M Pictures are worth a thousand words, right? So Jane x 1,000.
Jane Bloggs $100B With hair like that?! Enough said…

Table Fixed

Employee Salary
John Doe $1 Because that’s all Steve Jobs needed for a salary.
Jane Doe $100K For all the blogging she does.
Fred Bloggs $100M Pictures are worth a thousand words, right? So Jane x 1,000.
Jane Bloggs $100B With hair like that?! Enough said…

Table Responsive

Employee Salary
John Doe $1 Because that’s all Steve Jobs needed for a salary.
Jane Doe $100K For all the blogging she does.
Fred Bloggs $100M Pictures are worth a thousand words, right? So Jane x 1,000.
Jane Bloggs $100B With hair like that?! Enough said…

HTML Tags

Highlights

Lorem ipsum dolor sit amet, highlighted text. In fringilla libero dui, porttitor highlighted text dui tempor nec. Donec eleifend ligula non magna maximus, eget vehicula turpis viverra.

Link Tag
Use <a> tag to defines a link.

Marked Text
Use the <mark> tag to highlight parts of your text.

Deleted Text
The <del> tag will let to define replaced or deleted text.

Strikethrough Text
The <s> tag specifies text that is no longer correct, accurate or relevant.

Inseted Text
The <ins> tag defines a text that has been inserted into a document.

Undelined Text
The <u> tag used for underline a snippet of text.

Small Text
The <small> defines smaller text.

Bold Text
The <strong> tag used for emphasizing a snippet of text with a heavier font-weight.

Italic Text
The <em> tag used for emphasizing a snippet of text with italics.

Quote Tag
The <q> tag defines a short quotation:
Developers, developers, developers… – Steve Ballmer

Cite Tag
The <cite> tag defines the title of a work (e.g. a book, a song, a movie, a TV show, a painting, a sculpture, etc.)
For Example: "Code is poetry." —Automattic

Abbreviation Tag
The <abbr> tag defines an abbreviation or an acronym, like HTMLMr.Dec.ASAPATM.

Subscript Tag
The <sub> tag defines subscript text.
Subscript text appears half a character below the normal line and with smaller font size.
Subscript text can be used for chemical formulas, like H2O.

Superscript Tag
The <sup> tag defines superscript text.
Superscript text appears half a character above the normal line and with smaller font size. It can be used for footnotes, like WWW[1] or for scientific expressions, like Albert Einstein's E = MC2.

Code Tag
The <code> tag defines a piece of computer code.

Keyboard Tag
Use the <kbd> tag to indicate input that is typically entered via keyboard.
For Example: To reformat text, press Alt+Shift+F

Preformatted Tag
The <pre> tag defines preformatted text.

.post-title {
        margin: 0 0 5px;
        font-weight: bold;
        font-size: 38px;
        line-height: 1.2;
        and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
    }

Variable Tag
For indicating variables use the <var> tag: y = mx + b

Samp Tag
The <samp> tag defines sample output from a computer program.

Dropcups

Lorem ipsum dolor sit amet, link example. In fringilla libero dui, porttitor condimentum dui tempor nec. Donec eleifend ligula non magna maximus, eget vehicula turpis viverra. Donec luctus purus eget dui faucibus congue. Maecenas id dui ut felis mollis ornare. Phasellus maximus felis sapien, facilisis ultricies elit lacinia id.

Lorem ipsum dolor sit amet, link example. In fringilla libero dui, porttitor condimentum dui tempor nec. Donec eleifend ligula non magna maximus, eget vehicula turpis viverra. Donec luctus purus eget dui faucibus congue. Maecenas id dui ut felis mollis ornare. Phasellus maximus felis sapien, facilisis ultricies elit lacinia id.

Lorem ipsum dolor sit amet, link example. In fringilla libero dui, porttitor condimentum dui tempor nec. Donec eleifend ligula non magna maximus, eget vehicula turpis viverra. Donec luctus purus eget dui faucibus congue. Maecenas id dui ut felis mollis ornare. Phasellus maximus felis sapien, facilisis ultricies elit lacinia id.

Lorem ipsum dolor sit amet, link example. In fringilla libero dui, porttitor condimentum dui tempor nec. Donec eleifend ligula non magna maximus, eget vehicula turpis viverra. Donec luctus purus eget dui faucibus congue. Maecenas id dui ut felis mollis ornare. Phasellus maximus felis sapien, facilisis ultricies elit lacinia id.

Tooltips

Lorem ipsum dolor sit amet, link example. In fringilla libero dui, porttitor condimentum dui tempor nec. Donec eleifend ligula non magna maximus, eget vehicula turpis viverra. Donec luctus purus eget dui faucibus congue. Maecenas id dui ut felis mollis ornare. Phasellus maximus felis sapien, facilisis ultricies elit lacinia id.