Typography

Headings

Firefox OS also known as B2G h1

It is being developed by Mozilla, the non-profit organization best known for the Firefox web browser.

 <h1>Firefox OS <small>also known as B2G</small></h1>
  <p>
    It is being developed by Mozilla, the non-profit 
    organization best known for the Firefox web browser.
  </p>

Firefox OS also known as B2G h2

It is being developed by Mozilla, the non-profit organization best known for the Firefox web browser.

<h2>Firefox OS <small>also known as B2G</small></h2>
<p>...text here...</p>

Firefox OS also known as B2G h3

It is being developed by Mozilla, the non-profit organization best known for the Firefox web browser.

<h3>Firefox OS <small>also known as B2G</small></h3>
<p>...text here...</p>

Firefox OS also known as B2G h4

It is being developed by Mozilla, the non-profit organization best known for the Firefox web browser.

<h4>Firefox OS <small>also known as B2G</small></h4>
<p>...text here...</p>

Firefox OS also known as B2G h5

It is being developed by Mozilla, the non-profit organization best known for the Firefox web browser.

<h5>Firefox OS <small>also known as B2G</small></h5>
<p>...text here...</p>

Firefox OS also known as B2G h6

It is being developed by Mozilla, the non-profit organization best known for the Firefox web browser.

<h6>Firefox OS <small>also known as B2G</small></h6>
<p>...text here...</p>

Body text

Lead paragraph

<p class="lead">Lead paragraph</p>

Standard paragraph

<p>Standard paragraph</p>

Small paragraph

<p class="small">Small paragraph</p>

This line of text is meant to be treated as fine print.

<p><small>This line of text is meant to be treated
 as fine print.</small></p>

rendered as bold text

<p><strong>rendered as bold text</strong></p>

rendered as italicized text

<p><em>rendered as italicized text</em></p>

Left aligned text.

<p class="text-left">Left aligned text.</p>

Center aligned text.

<p class="text-center">Center aligned text.</p>

Right aligned text.

<p class="text-right">Right aligned text.</p>

Justified text.

<p class="text-justify">Justified text.</p>

An abbreviation of the word attribute is attr

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

HTML is the best thing since sliced bread.

<p><abbr title="HyperText Markup Language"
 class="initialism">HTML</abbr> is the best thing
 since sliced bread.</p>

Code

Inline

For example, <section> should be wrapped as inline.

For example, <code>&lt;section&gt;</code> should
be wrapped as inline.

User input

To switch directories, type cd followed by the name of the directory.

To switch directories, type <kbd>cd</kbd> followed
by the name of the directory.

Basic block

<p>Sample text here...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

Address

Free Software Foundation
51 Franklin Street, Fifth Floor
Boston, MA 02110-1301
USA
P: (123) 456-7890
Full Name
first.last@example.com 

<p>
    <address>
    <strong>Free Software Foundation</strong><br>
        51 Franklin Street, Fifth Floor<br>
        Boston, MA 02110-1301<br>
        USA<br>
        <abbr title="Phone">P:</abbr> (123) 456-7890
    </address>
    <address>
        <strong>Full Name</strong><br>
        <a href="mailto:#">first.last@example.com</a>
    </address>
</p>

Block quote

Giving up smoking is the easiest thing in the world. I know because I've done it thousands of times.

Mark Twain

<blockquote>
  <p>
    Giving up smoking is the easiest thing in the world.
    I know because I've done it thousands of times.
  </p>
  <footer>Mark Twain</footer>
</blockquote>

Don't let schooling interfere with your education.

Mark Twain

<blockquote class="blockquote-reverse">
  <p>
    Don't let schooling interfere with your education.
  </p>
  <footer>Mark Twain</footer>
</blockquote>

Lists

Ordered list

  1. Normal list item
  2. Bold list item
  3. Italic text list item
  4. List item with icon
  5. List item with color icon

<ol>
    <li>Normal list item</li>
    <li><b>Bold list item</b></li>
    <li><i>Italic text list item</i></li>
    <li><i class="fa fa-upload"></i>
        List item with icon
    </li>
    <li><i class="fa fa-upload txt-success"></i>
        List item with color icon
    </li>
</ol>

Unordered list

  • Normal list item
  • Bold list item
  • Italic text list item
  • List item with icon
  • List item with color icon
  • Subitem
    • Normal subitem
    • Bold subitem
    • Italic text subitem
    • Subitem with icon
    • Subitem with icon

<ul>
    <li>Normal list item</li>
    <li><b>Bold list item</b></li>
    <li><i>Italic text list item</i></li>
    <li>
        <i class="fa fa-video-camera"></i>
        List item with icon
    </li>
    <li>
        <i class="fa fa-star txt-success"></i>
        List item with color icon
    </li>
    <li>Subitem
        <ul>
            <li>Normal subitem</li>
            <li><b>Bold subitem</b></li>
            <li><i>Italic text subitem</i></li>
            <li><i class="fa fa-upload"></i>
                Subitem with icon
            </li>
            <li>
                <i class="fa fa-upload txt-danger"></i>
                Subitem with icon
            </li>
            </ul>
      </li>
  </ul>

Simple inline list

  • Android
  • Firefox OS
  • Apple IOS

<ul class="list-inline">
    <li>Android</li>
    <li>Firefox OS</li>
    <li>Apple IOS</li>
</ul>

Inline list with icons

  • File
  • Save
  • Cut

<ul class="list-inline">
    <li class="fa fa-file-o"> File</li>
    <li class="fa fa-floppy-o"> Save</li>
    <li class="fa fa-cut"> Cut</li>
</ul>

Inline list with color icons

  • File
  • Save
  • Cut

<ul class="list-inline">
    <li><i class="fa fa-file-o txt-primary"></i> File</li>
    <li><i class="fa fa-floppy-o txt-danger"></i> Save</li>
    <li><i class="fa fa-cut txt-info"></i>Cut</li>
</ul>

Descriptions

Normal description

Linux
Linux is a Unix-like and POSIX-compliant computer operating system assembled under the model of free and open source software development and distribution.
Microsoft Windows
Series of graphical interface operating systems developed, marketed, and sold by Microsoft.

<dl>
    <dt>Linux</dt>
    <dd>Linux is a Unix-like and POSIX-compliant
        computer operating system assembled under
        the model of free and open source software
        development and distribution.
    </dd>
    <dt>Microsoft Windows</dt>
    <dd>Series of graphical interface operating systems
        developed, marketed, and sold by Microsoft.
    </dd>
</dl>

Horizontal description

Android
Operating system for mobile devices, produced by Google
Maemo
Software platform developed by Nokia and then handed over to Hildon Foundation for smartphones and Internet tablets.

<dl class="dl-horizontal">
    <dt>Android</dt>
    <dd>Operating system for mobile devices,
        produced by Google
    </dd>
    <dt>Maemo</dt>
    <dd>Software platform developed by Nokia and then
        handed over to Hildon Foundation for
        smartphones and Internet tablets.
    </dd>
</dl>