Typography

headings, texts, lists and more

Heading

H1. Heading 1

H2. Heading 2

H3. Heading 3

H4. Heading 4

H5. Heading 5

H6. Heading 6

Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Duis mollis, est non commodo luctus, nisi erat porttitor ligula integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous Source Title

Paragraph Styling & Lead

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo attribute consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lists

Unordered

List Item 1
List Item 2
List Item 3
List Item 4

Ordered

List Item 1
List Item 2
List Item 3
List Item 4

Unstyled

List Item 1
List Item 2
List Item 3
List Item 4

Inline

List Item 1
List Item 2
List Item 3
List Item 4

Advance Lists

Styling

List item in strong tag
List item in small tag
List item with longer text that may show in 2 line
List item in italic tag

Colorfull

Normal list item
List Item in .text-success class
List Item in .text-error class
List Item in .text-warning class
List Item in .text-info class
List Item in .muted class

Custom Icon

List Item 1
List Item 2
List Item 3
List Item 4, without icon
List Item 5

Inline & Custom Icon

Item 1
Item 2
Item 3
Item 4, without icon
Item 5

Description

Default Description

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.

Horizontal Description

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.

Abbreviations

For expanded text on long hover of an abbreviation, include the title attribute.

An abbreviation of the word attribute is attr.

Add .initialism to an abbreviation for a slightly smaller font-size.

HTML is the best thing since sliced bread.

Address

Your, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
first.last@example.com

Pre

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

Code

Inline Code

Embeded Inline Code in <p> tag

Syntax Highliter

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" >&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>