Alert

Alerts are used to provide important information to user.

Alert with text, link and icon.

There are five types of alert: primary, secondary, success, warning and error. Refer to code snippet below to get the desired alert.

Alert with dismiss button.

Alert can have dismiss button to close it. Refer to code snippet.

Javascript code

---

Avatar

Avatar is used to show profile photo.

Image Avatar

Avatar have four sizes: small, medium, large and x-large. Refer to code snippet to get the desired avatar size.

Text Avatar

Text avatar is used to show users initials if profile photo is not provided. Just like avatar, text avatar have four sizes: small, medium, large and x-large. Refer to code snippet to get the desired size.

---

Badge

Badge is used to display user status information or notification count.

Badge on Icon

Badge on icon is used to show the count. Refer to code snippet.

Badge on Avatar

Badge on avatar is used to show user status: online or offline. Refer to code snippet.

---

Button

Buttons are also called as call to action. It is used to perform some function.

Primary & link button

There are three types of button primary solid, outline and simple link button. Refer to code to use desired button.

Icon button

You can use icon with button as follows

Floating action button

Floating action button is fixed to screen to perform some function like create a post, scroll to top etc.

---

Card

A card is container for a few short, related pieces of information.

Cards with badges and dismiss

The below cards have best seller badge and a dismiss button.

Cards with text overlay and text only card

The below cards have text overlay effect and text only card

Horizontal Card

The below cards are in horizontal format.

Grid

Grid is used to align elements into columns and rows.

Grid-2

Grid two column layout is used to display elements side by side in a single row.

Grid-3

Grid three column layout is used to display three elements in a single row.

Image

Images can be responsive to fit the parent's width, and also can be customised to be round shaped

Responsive image

You can add class img-responsive to make image responsive.

Round image

You can have round image using img-round class.

Input

Inputs are used to get the data from user.

Inputs with validation and error style

Below are the input styles for error validation

Javascript code

---

Lists

Lists are used to group together related pieces of information so they are clearly associated with each other and easy to read.

Spaced list

Spaced list is used to display list in same line for eg. navigation menu.

Stacked list

Stacked list is used in notification section.

---

Modal

A modal is a dialog box/popup window that is displayed on top of the current page.

Modal demo

Javascript code

Navigation

Navigation menu is used at top of the webiste for user to navigate to different pages.

Desktop (Simple)

Desktop navigation have logo or title on left side and page links on right side.

Rating

Ratings are used to rate the product or service. There are two types of rating: user rating and badge rating.

Text utilities

Below are the text utilities style

Headings

There are six heading styles. Refer the code below

Small text, gray text

Small text and gray text is used for secondary or less important information

Text with alignments

To align the text add text-center, text-left, text-right class to wrapper element.

Toast

Toast is used to push notifications to users.

Toast demo

Javascript code