Avatars

Learn how to create an avatar image with CSS.

Avatar Avatar Avatar Avatar

How To Create Avatar Images ?

Step 1) Add HTML:

Step 2) Add Css:


Alert

Learn how to create alert messages with CSS.

Alert messages can be used to notify the user about something special: danger, success, information or warning.

This is a primary alert Example!!!!
This is a secondary alert Example!!!!
This is a success alert Example!!!!
This is a danger alert Example!!!!
This is a warning alert Example!!!!
This is a info alert Example!!!!
This is a light alert Example!!!!
This is a dark alert Example!!!!

Step 1) Add HTML:

Step 2) Add Css:


Buttons

Step 1) Add HTML:

Step 2) Add Css:

Every button has a unique class for which it is responsible for the color and hover effect.The btn class is common.It is mainly for the pading and sizing stuffs.

Outline Buttons

I am putting down the HTML code:

Large Buttons:

Fancy larger or smaller buttons? Add .btn-lg for sizes.

HTML Snippet :

Css is quite simple :

Icon Buttons :

Icon Buttons are basically buttons with Icon in it. The Icon can be anything depending on the situation.You can also add a img tag which can be used as a icon too buy implementing the proper css.

Floating Action Buttons:

A floating action is mainly fixed on the view.

HTML:

Css is simple :

Just add the position:fixed to the button you want to get fixed in the view.It will start working.Change the css as per your needs.


Images

Responsive images will automatically adjust to fit the size of the screen.To make the images responsive add the class "responsive-img" and set the max-width to 100% and height to auto it will also keep the aspect ratio same.

Placeholder Responsive image

How To Create Responsive Images

Step 1) Add HTML:

Step 2) Add CSS:

If you want the image to scale both up and down on responsiveness, set the CSS max-width property to 100% and height to auto:

Round Images:

Round images are very simple to make just put the "border-radius : 50% ". You need to adjust the width and height according to your case.

How to Create a Round Image :

Step 1) Add HTML :

Step 2) Add Css :


Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Icon Badges:

5
5

BADGES


Lists

Lists are a flexible and powerful component for displaying a series of content

Unordereed List

  • Item
  • Item
  • Item
  • Item
  • Item

Ordered List

  1. Item1
  2. Item2
  3. Item3
  4. Item4
  5. Item5

Unordered HTML List

An unordered list starts with <ul> tag.Each list item starts with a <li> tag.

The list items will be marked with bullets (small black circles) by default.

Example:

Ordered HTML List

An ordered list starts with <ol> tag.Each list item starts with a <li> tag.

The list items will be marked with numbers by default.

Example:

Active Item

Add .active-list to .stacked-list to indicate the current active selection.

Stacked List


Model


Cards

Normal Cards:

GERUA

Women Green Printed Kurta

RS.1048RS.2999 (65% OFF)

GERUA

Women Green Printed Kurta

RS.1048RS.2999 (65% OFF)

GERUA

Women Green Printed Kurta

RS.1048RS.2999 (65% OFF)

GERUA

Women Green Printed Kurta

RS.1048RS.2999 (65% OFF)

GERUA

Women Green Printed Kurta

RS.1048RS.2999 (65% OFF)

GERUA

Women Green Printed Kurta

RS.1048RS.2999 (65% OFF)

TRENDING

GERUA

Women Green Printed Kurta

RS.1048RS.2999 (65% OFF)

GERUA

Women Green Printed Kurta

RS.1048RS.2999 (65% OFF)

1