Miscellaneous

Badges

Type
Markup
New
<span class="badge badge-new"> New </span>
Primary
<span class="badge badge-primary"> Primary </span>
Secondary
<span class="badge badge-secondary"> Secondary </span>
Success
<span class="badge badge-success"> Success </span>
Info
<span class="badge badge-info"> Info </span>
Warning
<span class="badge badge-warning"> Warning </span>
Danger
<span class="badge badge-danger"> Danger </span>
Dark
<span class="badge badge-dark"> Dark </span>
Default
<span class="badge badge-default"> Default </span>

Badges with Heading

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example heading New

Example heading Primary

Example heading success

Example heading info

Example heading warning
Example heading danger

Default

Type
Badge
Primary
Primary
Secondary
Secondary
Success
Success
Danger
Danger
Warning
Warning
Info
Info
Default
Default
Dark
Dark
New
New

Pills

Type
Badge
Primary
Primary
Secondary
Secondary
Success
Success
Danger
Danger
Warning
Warning
Info
Info
Default
Default
Dark
Dark
New
New

Classic

Type
Badge
Primary
Primary
Secondary
Secondary
Success
Success
Danger
Danger
Warning
Warning
Info
Info
Default
Default
Dark
Dark
New
New

Outline

Type
Badge
Primary
Primary
Secondary
Secondary
Success
Success
Danger
Danger
Warning
Warning
Info
Info
Default
Default
Dark
Dark
New
New

Outline Pills

Type
Badge
Primary
Primary
Secondary
Secondary
Success
Success
Danger
Danger
Warning
Warning
Info
Info
Default
Default
Dark
Dark
New
New

Outline Classic

Link Badge
Classic
Primary
Primary
Secondary
Secondary
Success
Success
Danger
Danger
Warning
Warning
Info
Info
Default
Default
Dark
Dark
New
New

Tags

Custom Badges

Person John Doe 9 Person John Doe ×

Image Badge Style 1

Use .badge-collapsed-img class on ul tag.

  • admin-profile
  • admin-profile
  • admin-profile
  • admin-profile

Image Badge Style 2

Use .badge-collapsed-img class on ul tag.

  • admin-profile
  • admin-profile
  • admin-profile
  • admin-profile

Image Badge Style 3

Use .badge-collapsed-img class on ul tag.

  • admin-profile
  • admin-profile
  • admin-profile
  • admin-profile

Image Badge With Tooltips - Default

Use .badge-tooltip class with .badge-collapsed-img class on ul tag.

  • admin-profile
  • admin-profile
  • admin-profile
  • admin-profile

Image Badge With Tooltips - Classic

Use .badge-tooltip class with .badge-collapsed-img class on ul tag.

  • admin-profile
  • admin-profile
  • admin-profile
  • admin-profile

Custom Dropdown

Use .custom-dropdown class on div tag of a dropdown .

Account Profile Settings
Account Profile Settings
Profile Notification Settings
Profile Notification Settings

Line Search

Search Box

Animated Search Box

Search Style 1

Search Style 2

Search Style 3

Breadcrumbs

Style 1

Style 2

Images

Default
admin-profile
.rounded
admin-profile
.rounded-circle
admin-profile

Jumbotron

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

Jumbotron Fluid

Fluid Jumbotron

This is a modified jumbotron that occupies the entire horizontal space of its parent.


admin-profile

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

Someone famous Source Title

Call To Action

Keep your data Safe.

We provide three stage end-to-end encryption keeping your data safe and secure. Our 99.97% uptime further assure that the data is protected from any threat.

Call To Action

Get Started Today!

We provide best analytics for mobile and web platforms. Automate your website to receive reports everyday.

Call To Action

Mars Invites You

Be the first on the planet to call Mars your home.

A rare opportunity. A trip of a lifetime.