#### 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

    <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.

    <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.

    <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>