Loading...

### Typography

##### Headings

All HTML headings, `<h1>` through `<h6>`, are available.

# This is a Heading 1

## This is a Heading 2

### This is a Heading 3

#### This is a Heading 4

##### This is a Heading 5

###### This is a Heading 6

Heading 1Sub Heading

Heading 2Sub Heading

Heading 3Sub Heading

Heading 4Sub Heading

Heading 5Sub Heading

Heading 6Sub Heading

##### Very Thin (100)

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

##### Thin (300)

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

##### Normal (400)

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

##### light Normal (600)

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

##### Bold (700)

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

##### Extra Bold (900)

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

##### Headings

Use the included utility classes to recreate the small secondary heading text.

### Fancy display headingWith faded secondary text

##### Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

# Display 1

# Display 2

# Display 3

# Display 4

##### Lead

Make a paragraph stand out by adding `.lead`.

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

##### Inline text elements

Styling for common inline HTML5 elements.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

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

This line rendered as bold text.

This line rendered as italicized text.

##### Text Color

You can Give text color by using txt-* class

This is Primary text You can archive this adding `.txt-primary` class

This is Secondary text You can archive this adding `.txt-secondary` class

This is Success text You can archive this adding `.txt-success` class

This is Info text You can archive this adding `.txt-info` class

This is Warning text You can archive this adding `.txt-warning` class

This is Danger text You can archive this adding `.txt-danger` class

This is Dark text You can archive this adding `.txt-dark` class

This is Primary text You can archive this adding `.txt-primary` class

##### Listing Typography

###### Unorder list

- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet

###### Order list

1. Lorem ipsum dolor sit amet
2. Lorem ipsum dolor sit amet
3. Lorem ipsum dolor sit amet
4. 1. Lorem ipsum dolor sit amet
   2. Lorem ipsum dolor sit amet
   3. Lorem ipsum dolor sit amet
   4. Lorem ipsum dolor sit amet
   5. Lorem ipsum dolor sit amet
5. Lorem ipsum dolor sit amet
6. Lorem ipsum dolor sit amet

###### Order list

Lorem ipsum dolor sit amet
  - ipsum dolor sit amet
Lorem ipsum dolor sit amet
  - ipsum dolor sit amet
Lorem ipsum dolor sit amet
  - ipsum dolor sit amet
Lorem ipsum dolor sit amet
  - ipsum dolor sit amet
Lorem ipsum dolor sit amet
  - ipsum dolor sit amet

###### Fontawesome list

- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet

###### ICO Icon list

- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet

###### Themfy list

- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet

##### Blockquotes

Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the name of the source work in `<cite>`.

Naming a source

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

Alignment Center

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

Alignment Right

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