### Avatar

#### Sizing

#### Avatar With Status

#### Shape

#### Group

CF

### Alerts

Holy guacamole! You should check in on some of those fields below.
Holy guacamole! You should check in on some of those fields below.
Warning! There was a problem with your network connection.
Error! A problem has been occurred while submitting your data.
Success! Your message has been sent successfully.
Note! Please read the comments carefully.
Holy guacamole! You should check in on some of those fields below.
Holy guacamole! You should check in on some of those fields below.

### Breadcrumbs

### Buttons

#### Default Button

#### Button Sizes

#### Button Groups

#### Rounded Button

use `.btn-rounded` in class `.btn` class to get Rounded button

use `.btn-rounded` in class `.btn-outline-*` class to get Rounded Outline button

#### Outline Buttons

Use `.btn-outline-*` class for outline buttons.

Normal
Active
Disabled

### Cards

##### Card with image and links

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

##### Card with image and button

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

##### Card with image and list

- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros

##### Card with links

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

##### Card with button

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

##### Card with list

- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros

This is my header

##### Special title treatment

Some quick example text to build on the card title and make up the bulk of the card's content.

##### Card with tabs

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

##### Card with tabs

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

##### Card with tabs

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

##### Card with pills

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

##### Card with pills

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

##### Card with pills

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

### Dropdowns

#### Dropdowns within Text

Dropdown

#### Dropdowns within Buttons

#### Split button dropdowns

### Pagination

- Previous
- 1
- 2 (current)
- 3
- Next

- « Previous
- 1
- 2
- 3
- » Next

- Previous
- 1
- 2 (current)
- 3
- Next

- Previous
- 1
- 2 (current)
- 3
- Next

### Progress

#### Large Progress Bars

#### Default Progress Bars

#### Medium Progress Bars

#### Small Progress Bars

#### Extra Small Progress Bars

### Tabs

#### Basic tabs

Tab content 1
Tab content 2
Tab content 3

#### Basic justified tabs

Tab content 1
Tab content 2
Tab content 3
Tab content 4

#### Top line tabs

Tab content 1
Tab content 2
Tab content 3

#### Top line justified

Tab content 1
Tab content 2
Tab content 3

#### Bottom line tabs

Tab content 1
Tab content 2
Tab content 3

#### Bottom line justified

Tab content 1
Tab content 2
Tab content 3

#### Solid tabs

Tab content 1
Tab content 2
Tab content 3

#### Solid justified

Tab content 1
Tab content 2
Tab content 3

#### Solid Rounded

Tab content 1
Tab content 2
Tab content 3

#### Rounded justified

Tab content 1
Tab content 2
Tab content 3

### Typography

#### Headings

# h1. Bootstrap heading

## h2. Bootstrap heading

### h3. Bootstrap heading

#### h4. Bootstrap heading

##### h5. Bootstrap heading

###### h6. Bootstrap heading

#### Blockquotes

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

#### Text element

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.

This is in monospace

#### Coloured Link

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-muted

.text-white

#### Coloured text

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Muted link

White link

#### Bullet Lists

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
  - Vestibulum laoreet porttitor sem
  - Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem

#### Bullet Lists

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
   - Phasellus iaculis neque
   - Purus sodales ultricies
   - Vestibulum laoreet porttitor sem
   - Ac tristique libero volutpat at
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

#### Unstyled Lists

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
  - Vestibulum laoreet porttitor sem
  - Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem