Alerts

The alert component has four types: alert-error, alert-success, alert-warning, alert-info

Different Alerts

Your browser is outdated!

Your experience may be degraded.

Your browser is outdated!

Your experience may be degraded.

Your browser is outdated!

Your experience may be degraded.

Your browser is outdated!

Your experience may be degraded.

Avatars

There are 4 types of avatars. avatar-xs, avatar-sm, avatar-md and avatar-lg.
The avatars have further two types of badges for showcasing online and offline avatar-online avatar-offline

Different Avatars

Aman Tulsyan Aman Tulsyan Aman Tulsyan Aman Tulsyan

Different Avatars With Badges

Aman Tulsyan
Aman Tulsyan
Aman Tulsyan
Aman Tulsyan

Badges

There are 4 types of badges. badge-xs, badge-sm, badge-md and badge-lg.

Different Badges

Aman Tulsyan
5
Aman Tulsyan
5
Aman Tulsyan
5
Aman Tulsyan
5

Buttons

There are 4 types of buttons. btn-xs, btn-sm, btn-md and btn-lg.
There are two borad types among them btn-primary and btn-secondary

Different Buttons

Link Link

Cards

There are different types of cards. card without hero Image, card with hero Image, card-overlay, card with badges and dismissable cards, horizontal cards

Informative Cards

CARD TITLE

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

CARD TITLE

SUB HEADING

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

HEADING

CARD TITLE

SUB HEADING

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

CARD TITLE

SUB HEADING

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

CARD TITLE

SUB HEADING

CARD TITLE

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Product Cards

naruto_manga

Naruto Manga VOL.1

200

Images

There are different types of Images. rounded-images, squared-images.

Different Images

image image

Responsive Images

image

Inputs

There are different types of Form Fields. textarea, input-field.

Different Form Inputs

Forgot your Password?

Form Error Inputs

Enter correct Email and Password

Lists

There are different types of lists. square-unordered-lists, circle-unordered-lists, lower-alphabetical-ordered-lists, lower-roman-numerical-ordered-lists, etc

Unordered Lists

  • list item1
  • list item2
  • list item3
  • list item1
  • list item2
  • list item3
  • list item1
  • list item2
  • list item3

Ordered Lists

  1. List item with numbers
  2. List item with numbers
  3. List item with numbers
  1. List item with numbers
  2. List item with numbers
  3. List item with numbers
  1. List item with numbers
  2. List item with numbers
  3. List item with numbers
  1. List item with numbers
  2. List item with numbers
  3. List item with numbers
  1. List item with numbers
  2. List item with numbers
  3. List item with numbers

List with no style

  • list item1
  • list item2
  • list item3

Inline List

  • list item1
  • list item2
  • list item3

Stacked List

Typography

Checkout below text utilities

Different Headings

H1-Heading

H2-Heading

H3-Heading

H4-Heading

H5-Heading
H6-Heading

Different Text Properties

Left

Center
Right

small

gray

Rating

Rating components can be used as read-only badges or in reviews sections.

5 Star Rating

Toast

Toast components can be used as notifications in web applications.

Different Types Of Toast

Can't send photo. Retry in 5 seconds.
Your photo has been archived.
This item already has the label "travel". You can add a new label.

Simplified Grid

Grids are of two types 2-column grid and 3-column-grid

2 Column Grid

CARD TITLE

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

3 Column Grid

CARD TITLE

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

CARD TITLE

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

CARD TITLE

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.