SIDEBAR SKINS

HEADER SKINS

### Typography

#### Headings

Add tags `<h1>` to `<h6>` or class `.h1` to `.h6`

# h1. Heading

## h2. Heading

### h3. Heading

#### h4. Heading

##### h5. Heading

###### h6. Heading

#### Headings with secondary text

Add faded secondary text to headings

# h1. Heading Secondary text

## h2. Heading Secondary text

### h3. Heading Secondary text

#### h4. Heading Secondary text

##### h5. Heading Secondary text

###### h6. Heading Secondary text

#### Display headings

Add class `.display1` to `.display-4`

# Display 1

# Display 2

# Display 3

# Display 4

#### Paragraph

Write text in `<p>` tag

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley not only five centuries,

#### Icon size

Add class `.icon-lg`, `.icon-md`, `.icon-sm`

Icon-lg

Icon-md

Icon-sm

#### Blockquotes

Wrap content inside`<blockquote class="blockquote">`

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

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

#### Address

Use `<address>` tag

#### Lead

Use class `.lead`

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

#### Text colors

Use class `.text-primary`, `.text-secondary` etc. for text in theme colors

.text-primary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-secondary

.text-dark

.text-muted

.text-white

#### Top aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.

#### Center aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.

#### Bottom aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.

#### Highlighted Text

Wrap the text in `<mark>` to highlight text

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution

#### List Unordered

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit

#### Bold text

Use class`.font-weight-bold`

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution

#### List Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit>

#### Underline

Wrap in `<u>` tag for underline

lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.

#### Lowercase

Use class `.text-lowercase`

lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.

#### Uppercase

Use class `.text-uppercase`

lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.

#### Mute

Use class `.text-muted`

lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.

#### Strike

Wrap content in `<del>` tag

lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.

#### Capitalized

Use class `.text-capitalize`

lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.

#### List with icon

Add class `.list-ticked` to `<ul>`

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit>

#### List with icon

Add class `.list-arrow` to `<ul>`

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit>

#### List with icon

Add class `.list-star` to `<ul>`

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit>