Buttons
Badges & Pills
Badge Blue
Badge Green
Badge Red
Badge Yellow
Badge Dark
Badge Light
Badge Blue
Badge Green
Badge Red
Badge Yellow
Badge Dark
Badge Light
Button Group
Button Group
Tabs
It is a long established fact that a reader will be distracted by the readable content of a page.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Pagination
Progress
List Group
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
Accordion Dark Background
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.
Accordion Light Background
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.
Accordion Always Open
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.
Placeholder
Spinners
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Alerts
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
Modal
Offcanvas
Offcanvas top
...
Offcanvas right
...
Offcanvas bottom
...
Offcanvas
Some text as placeholder. In real life you can
have the elements you have chosen. Like, text,
images, lists, etc.
Popovers
Tooltips