AdminLTE 3 | General UI

# Inline Charts

### Color Palette

##### Theme Colors

#### Primary

#007bff
Disabled

#### Secondary

#6c757d
Disabled

#### Info

#17a2b8
Disabled

#### Success

#28a745
Disabled

#### Warning

#ffc107
Disabled

#### Danger

#dc3545
Disabled

##### Black/White Nuances

#### Black

#000000
Disabled

#### Gray Dark

#343a40
Disabled

#### Gray

#adb5bd
Disabled

#### Light

#1f2d3d
Disabled

##### Colors

#### Indigo

#6610f2
Disabled

#### Lightblue

#3c8dbc
Disabled

#### Navy

#001f3f
Disabled

#### Purple

#605ca8
Disabled

#### Fuchsia

#f012be
Disabled

#### Pink

#e83e8c
Disabled

#### Maroon

#d81b60
Disabled

#### Orange

#ff851b
Disabled

#### Lime

#01ff70
Disabled

#### Teal

#39cccc
Disabled

#### Olive

#3d9970
Disabled

##### Alerts and Callouts

### Alerts

##### Alert!

Danger alert preview. This alert is dismissable. A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.

##### Alert!

Info alert preview. This alert is dismissable.

##### Alert!

Warning alert preview. This alert is dismissable.

##### Alert!

Success alert preview. This alert is dismissable.

### Callouts

##### I am a danger callout!

There is a problem that we need to fix. A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.

##### I am an info callout!

Follow the steps to continue to payment.

##### I am a warning callout!

This is a yellow callout.

##### I am a success callout!

This is a green callout.

##### Tabs in Cards

### Tabs

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages.
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 of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

##### Progress Bars

### Progress Bars Different Sizes

`.progress`

40% Complete (success)

`.progress-sm`

20% Complete

`.progress-xs`

60% Complete (warning)

`.progress-xxs`

60% Complete (warning)

### Progress bars

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

### Vertical Progress Bars Different Sizes

By adding the class `.vertical` and `.progress-sm`, `.progress-xs` or `.progress-xxs` we achieve:

40%
100%
60%
60%

### Vertical Progress bars

By adding the class `.vertical` we achieve:

40%
20%
60%
80%

##### Bootstrap Accordion & Carousel

### Collapsible Accordion

#### Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

#### Collapsible Group Danger

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

#### Collapsible Group Success

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

### Carousel

Previous Next

##### Typography

### Headlines

# h1. Bootstrap heading

## h2. Bootstrap heading

### h3. Bootstrap heading

#### h4. Bootstrap heading

##### h5. Bootstrap heading

###### h6. Bootstrap heading

### Text Emphasis

Lead to emphasize importance

Text green to emphasize success

Text aqua to emphasize info

Text light blue to emphasize info (2)

Text red to emphasize danger

Text yellow to emphasize warning

Text muted to emphasize general

### Primary Block Quotes

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

> Someone famous in Source Title

### Secondary Block Quotes

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

> Someone famous in Source Title

### Unordered List

- 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

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

### Unstyled List

- 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

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

### Description Horizontal

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.