General Components

General Bootstrap Components

Familiar with this component? Yes, all components on this page are from bootstrap. So we have documented a few bootstrap components, as more you can refer to the bootstrap documentation page.

We're documenting here for wanting to check bootstrap built-in components still work well on our template.

General Components

Default With Title
More
With Icon Dismissible

Alerts

This is a primary alert.
This is a secondary alert.
This is a success alert.
This is a danger alert.
This is a warning alert.
This is a info alert.
This is a light alert.
This is a dark alert.
Primary
This is a primary alert.
Secondary
This is a secondary alert.
Success
This is a success alert.
Danger
This is a danger alert.
Warning
This is a warning alert.
Info
This is a info alert.
Light
This is a light alert.
Dark
This is a dark alert.
Primary
This is a primary alert.
Secondary
This is a secondary alert.
Success
This is a success alert.
Danger
This is a danger alert.
Warning
This is a warning alert.
Info
This is a info alert.
Light
This is a light alert.
Dark
This is a dark alert.
Primary
This is a primary alert.
Secondary
This is a secondary alert.
Success
This is a success alert.
Danger
This is a danger alert.
Warning
This is a warning alert.
Info
This is a info alert.
Light
This is a light alert.
Dark
This is a dark alert.

Badges

Heading

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Button

Variations

Primary Secondary Success Danger Warning Info Light Dark

Breadcrumb

Accordion

Panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Simple Active
More
Clickable Flush Badges Custom

List Group

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1

Pagination

Quick Example

Working With Icons

Active State

Sizing

Tooltips

Quick Example

Simple With Caption

Carousel

Dropdown

Quick Example

Action Another action Something else here
Action Another action Something else here
Separated link
Action Another action Something else here

Sizing

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Variation

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Simple Vertical
More
Pills Tabs Pills Dropdown

Navs

Simple Labels
More
Background Multiple Striped

Progress

25%
25%
25%
25%

Popover

Quick Example

Dismissible

Dismissible popover