Typography

Headings & paragraphs font style...

Headers

h1. Theme Heading 1

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>
'Open Sans' 32px Light

h2. Theme Heading 2

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

'Open Sans' 26px Light

h3. Theme Heading 3

Bootstrap's global default font-size is 14px, with a line-height of 1.428.

'Open Sans' 22px Light

h4. Theme Heading 4

'Open Sans' 18px Light
h5. Theme Heading 5
'Open Sans' 15px Light
h6. Theme Heading 6
'Open Sans' 13px Bold
<h1>h1. Theme Heading 1</h1>
            <h2>h2. Theme Heading 2</h2>
            <h3>h3. Theme Heading 3</h3>
            <h4>h4. Theme Heading 4</h4>
            <h5>h5. Theme Heading 5</h5>
            <h6>h6. Theme Heading 6</h6>
        

Quotes

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

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

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

Someone famous in Source Title
<blockquote class="pull-right">
                                    ...
                                    </blockquote>
                                

Discription Lists

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
                            <dt>...</dt>
                            <dd>...</dd>
                            </dl>
                        
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
                            <dt>...</dt>
                            <dd>...</dd>
                            </dl>
                        

Address

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com
<address>
                    <strong>Twitter, Inc.</strong><br>
                    795 Folsom Ave, Suite 600<br>
                    San Francisco, CA 94107<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>
                

Alignment

Left aligned text.

Center aligned text.

Right aligned text.

<p class="text-left">Left aligned text.</p>
                    <p class="text-center">Center aligned text.</p>
                    <p class="text-right">Right aligned text.</p>
                

All Lists

  • Unordered List Item
  • I am inside a strong tag
  • I am Italic!
    • We can also be red
    • Or green
    • Even purple!
  • I am inside a strong and Italic tag, I may also break into a new line if squized
  • I am inside a small tag
<ul>
                            <li>...</li>
                            </ul>
                        
  1. Ordered List Item
  2. Ordered List Item
  3. Ordered List Item
    • Unstyled list with custom icon
    • Unstyled list with custom icon
    • Unstyled list with custom icon
  4. I am inside a strong and Italic tag, I may also break into a new line if squized
  5. I am a label
<ol>
                            <li>...</li>
                            </ol>
                        
  • Inline List Item #1
  • Inline List Item #2
  • Inline List Item #3
<ul class="list-inline">
                            <li>...</li>
                            </ul>