Avatar

Avatar can be used to show user's profile picture on profile information page, on navigation bar, in blogs grid items.

Example of Image Avatar

Include class avatar and for size add class avatar-lg, avatar-md, avatar-sm, avatar-xs

Example of Text Avatar

Include class avatar-text

RM
UI
YZ
CD

Alert

Alerts are used for important information without interrupting the user's flow

Example of Primary Alert

Include class alert and primary-alert to make primary alert.

Primary Alert

Example of Diferent Alerts

Include class alert and warning-alert danger-alert success-alert to make different alerts.

Warning Alert
Danger Alert
Success Alert

Badge

Badges are being used to display a notification count or status information

Example of Badge on Avatars

Include class badge-container and status-badge and for various status use status-online, status-away, status-busy, status-offline

Example of Badge on Icons

Include class badge-container and icon-badge

2
4
3

Button

Buttons can be of many types like primary, link, floating action and more.You can add classes to make required button.

Example of Primary Button

Include class btn and primary-btn to make primary button.

Example of Link and Icon Buttons

Include class primary-link-btn, icon-btn and icon-text-btn for link and icon buttons.

Example of Floating Action Button

Include class float-action-btn.

Card

Example of Vertical Card

Include class card and vertical-card

Card Title

Card Subtitle

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, fuga?

Example of Horizontal Card

Include class card and horizontal-card

Card Title

Card Subtitle

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, fuga?

Example of Text Card

Include class card and text-card

Card Title

Card Subtitle

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, fuga?

Example of Card with Badge

Include class card and badge-card

Hurry

Card Title

Card Subtitle

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, fuga?

Example of Card with Dismiss

Include class card and dismiss-card

Card Title

Card Subtitle

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, fuga?

Example of Card with Text Overlay

Include class card and overlay-card

Overlay

Card Title

Card Subtitle

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, fuga?

Image

Images can be responsive and also can be customised to be round shaped

Example of Responsive Image

Include class responsive-img and for making your image Responsive

Example of Round Image

Include class round-img and responsive-img

Input

Inputs are used for taking user inputs in various ways.

Example of Normal Input

Include class input-field for normal input and textarea.

Example of Validated Inputs

Include class input-field and input-validation to make Validated Input.

html

javascript

List

List are used to show and stack similar elements and items.

Example of Unordered List with bullets.

Include class list

  • one
  • two
  • three
  • four
  • one
  • two
  • three
  • four
  • one
  • two
  • three
  • four

Example of Ordered List with bullets.

Include class list and other based on style.

  1. Numbered List
  2. Numbered List
  3. Numbered List
  4. Numbered List
  1. Lower Alphabetical List
  2. Lower Alphabetical List
  3. Lower Alphabetical List
  4. Lower Alphabetical List
  1. Reversed List
  2. Reversed List
  3. Reversed List
  4. Reversed List
  1. Capital Alphabetical List
  2. Capital Alphabetical List
  3. Capital Alphabetical List
  4. Capital Alphabetical List
  1. Roman List
  2. Roman List
  3. Roman List
  4. Roman List
  1. Roman List
  2. Roman List
  3. Roman List
  4. Roman List

Example of List with no bullets.

Include class list and list-no-style

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4

Example of Stacked List

Include class list and list-stacked

  • you have a notification
  • you have a notification

Toast

Example of Toast

Include toast class.

Toast
Success Toast
Danger Toast
html js
Demo Toast

Typography

Example of Heading

For heading u can use h1, h2, h3, h4, h5, h6 elements.

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Example of Paragraph elements.

Include class xl, l, s, xs.

Extra Large Text

Large Text

Text

Small Text

Extra Small Text

Example of Text Alignments

Include class text-left, text-center and text-right for alignment.

Left Text

Center Text

Right Text

Example of Colored Text

Include class text-primary, text-grey, text-white,text-green and text-red

Primary Color Text

Grey Color Text

White Color Text

Green Color Text

Red Color Text