Primärfarben

.bg-
primary
.bg-
secondary
.bg-
success
.bg-
info
.bg-
warning
.bg-
danger
.bg-
light
.bg-
dark
.bg-
gray-900
.bg-
gray-800
.bg-
gray-700
.bg-
gray-600
.bg-
gray-500
.bg-
gray-400
.bg-
gray-300
.bg-
gray-200
.bg-
gray-100

Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading with muted text

Lead Text: Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Example body text

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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

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

The following is rendered as bold text.

The following is rendered as italicized text.

An abbreviation of the word attribute is attr.

Emphasis classes

.text-muted
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

.text-primary
Nullam id dolor id nibh ultricies vehicula ut id elit.

.text-secondary
Pellentesque ornare sem lacinia quam venenatis vestibulum.

.text-warning
Etiam porta sem malesuada magna mollis euismod.

.text-danger
Donec ullamcorper nulla non metus auctor fringilla.

.text-success
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

.text-info
Maecenas sed diam eget risus varius blandit sit amet non magna.

Cards

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
PlaceholderImage cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

PlaceholderImage cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Header
Primary card title

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

Header
Secondary card title

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

Header
Success card title

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

Header
Danger card title

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

Header
Warning card title

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

Header
Info card title

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

Header
Light card title

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

Header
Dark card title

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

Alerts

Buttons

Primary link Link

Dropdowns

Formular

We'll never share your email with anyone else.
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
Must be 8-20 characters long.
Floating Labels
@
@example.com
https://example.com/users/
$ .00
@
With textarea
First and last name
$ 0.00
$ 0.00

Badges

Primary Secondary Success Danger
Warning Info Light Dark
Primary Secondary Success Danger
Warning Info Light Dark

Accordion

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

List Group

The current link item A second link item A third link item A fourth link item A disabled link item

Collapse

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Off Canvas

Link with href
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Modal

Open first modal

Pagination

Popovers





Dismissible popover

Tooltips

Progress Bars

25%

Spinners