Wellcome CSS Framework version 3.2.2

Download

CSS Propaties

Notification automatically remove after 20 seconds X

Responsive Web Design

Responsive website design is all about usage of HTML along with CSS. It automatically resizes, hide, shrink and enlarge a particular website. It allows making it look good on all platforms. The approach of responsive design makes your web page get a transparent picture on all devices. Frankly speaking this approach of designing is not a program or a java Script.

Responsive Meta Tag

This is about to set the viewport of the page. It allows the browser instructions on how to control the dimension of the pages along with the scaling.

Typography

Typography

Heading h1 (36px)

Heading h2 (30px)

Heading h3 (24px)

Heading h4 (18px)

Heading h5 (14px)
Heading h6 (12px)

This is Font Size (12px)

This is Font Size (14px)

This is Font Size (16px)

This is Font Size (18px)

This is Font Size (20px)

This is Font Size (22px)

This is Font Size (24px)

This is Font Size (26px)

This is Font Size (28px)

This is Font Size (30px)

This is Font Size (32px)

This is Font Size (34px)

This is Font Size (36px)

This is Font Size (38px)

This is Font Size (40px)

Code Here »

Text Color

Text Color of Paragraph

Text Color White Class Name "text-white"

Text Color Black Class Name "text-black"

Text Color Success Class Name "text-success"

Text Color Blue Class Name "text-blue"

Text Color Warning Class Name "text-warning"

Text Color Red Class Name "text-red"

Code Here »

Text Decoration / Font Decoration

Text Decoration / Font Decoration

This Text is Bold. Class Name "text-bold"

This Text is Italic. Class Name "text-italic"

This Text is Underline. Class Name "text-underline"

This Text is Uppercase. Class Name "text-uppercase"

This Text is Lowercase. Class Name "text-lowercase"

This Text is Overline. Class Name "text-overline"

This Text is Capitalize. Class Name "text-capitalize"

This is ctrl+v Keyboard Word.

This Text is small. tag <small></small>

This Text is Line Through. Class Name "text-line_through"

Code Here »

Type of Text Align

Type of Text Align

Text Align Left Class Name "text-left"

Text Center Left Class Name "text-center"

Text Align Right Class Name "text-right"

Text Align Justify Class Name "text-justify"

Code Here »

Background Color

Background Color div text and any other background color

Background Color Black Class Name "black-bg"

Background Color Success Class Name "success-bg"

Background Color Blue Class Name "blue-bg"

Background Color Warning Class Name "warning-bg"

Background Color Red Class Name "red-bg"

Background Color Red Class Name "gray-bg"

Background Color Red Class Name "purple-bg"

Background Color Red Class Name "lightgreen-bg"

Background Color Red Class Name "lightred-bg"

Code Here »

CSS Simple Grid System

Simple grid is a 12 column, lightweight CSS grid to help you quickly build responsive website. All you can do is download the CSS Style sheet. Then you can add appropriate classes to your markup and you are off to races.

Responsive Grid System 'col-xs-' 'col-sm-' 'col-md-' 'col-lg-' is Class Name

column 1
column 11
column 2
column 10
column 3
column 9
column 4
column 8
column 5
column 7
column 6
column 6
column 7
column 5
column 8
column 4
column 9
column 3
column 10
column 2
column 11
column 1
Code Here »

Navbar Left

Navbar Center

Navbar Right

Code Here »

Button

Button Button Button Button Button

Button Border

Button Button Button Button Button

Button Radius

Button Button Button Button Button

Button Border with Radius

Button Button Button Button Button

Button Rounded

Button Button Button Button Button

Button Border with Rounded

Button Button Button Button Button
Code Here »

Box

  padding < width:550px Small {sm} Medium {md} < width:1099px Large {lg}
.container 0px 15px 100% 550px 768px 991px 1100px {Default}
.container-full 0px 15px   100% 100%   100% {Default}
.box 10px   100% 100%   100% {Default}
.box-medium 15px 10px   100% 100%   100% {Default}
.box-large 20px 10px   100% 100%   100% {Default}
.box-large-big 100px 10px   100% 100%   100% {Default}
Class Name .box
Class Name .box-medium
Class Name .box-large
Class Name .box-large-big

Box width Head

Header Caption
This is Text Example

Container Width 1100px. Class Name .container

.container-full Width 100%. Class Name .container-full
Code Here »

Title Box

Title Box

Some Text Here.

Title Box

Some Text Here.

Simple Text Here.

Code Here »

Panel

Panel Blue Class Name .panel-blue
Panel Success Class Name .panel-success
Panel Success Class Name .panel-warning
Panel Success Class Name .panel-red

Panel Medium

Panel Blue Class Name .panel-blue .panel-medium
Panel Success Class Name .panel-success .panel-medium
Panel Success Class Name .panel-warning .panel-medium
Panel Success Class Name .panel-red .panel-medium
Code Here »

Slider

slider 1
slider 2
slider 3
slider 4
Code Here »

Message Box

Header Caption
Blue Message Box
Header Caption
Success Message Box
Header Caption
Warning Message Box
Header Caption
Red Message Box
Code Here »

Table Structure

Table Structure Example -1

     
     
     
     
     

Table Structure Example -2

     
     
     
     
     

Table Structure Example -3

     
     
     
     
     
Code Here »

Circle /Radius

Div or Image Circle /Radius Class Name .radius10 .radius360

"radius10"
"radius360"
Radius Generator »

Plugins

Responsive Test Your Webpage

Mp3 Player

Gradient Generator

Radius Genatater

Gradient Generator

Generator Your Gradient and use your Web Application.
Gradient Generator »

Image Responsive

Image Responsive Class Name .img-responsive .max-img-responsive

Class Name "img-responsive"

Class Name "max-img-responsive"

Image Effects

.ie-cbwh
.ie-zoomh
.ie-bwch
More Image Effects »

Hover Effects

.hover-zoom
.hover-zoom-out
.hover-puls
.hover-bounce-in
.hover-sweep-to-right
.wc-sweep-center-move
.wc-sweep-to-left
.wc-sweep-to-top
.wc-sweep-to-bottom
Code Here »

Align

Align Class Name .left .center .right

"left"
"center"
"right"

Progress Bar

Class Name .progress_bar
And Prograss Value Define

20%

 

50%

 

100%

 

 

30%

 

40%

 

50%
Code Here »

Closeable Box

This is Write Box content
X
This is Write Box content
X
This is Write Box content
X
This is Write Box content
X
X
This is Write Box content
X
This is Write Box content
X
This is Write Box content
X
This is Write Box content
Code Here »
Write Your Modal Heading

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Big Modal Box Add Class .big-pop .big-x-pop .big-xx-pop

Example

.content-sec .big-pop
Code & Example Here »

Click Dropdown

Code Here »

Breadcrumb Type Exmple No.1. Class Name .breadcrumb-1

 

Breadcrumb Type Exmple No.2. Class Name .breadcrumb-2

Code Here »

Pagination

Pager Type Exmple No.1. Class Name .pagination-1

Pager Type Exmple No.2. Class Name .pagination-2

Code Here »

Accordion

  • Accordion Bar

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 150s.

  • Accordion Bar

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 150s.

  • Accordion Bar

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 150s.

  • Accordion Bar

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 150s.

Accordion with plus minus

Accordion 1
Accordion 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 150s.
Accordion 2
Accordion 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 150s.
Accordion 3
Accordion 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 150s.
Code Here »

Tab

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 150s.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 150s.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 150s.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 150s.

Code Here »

Badges

Badges Black05

Badges Blue05

Badges Success05

Badges Warning05

Badges Red05


Box Badges

  • Box Badges No. 1 05
  • Box Badges No. 2 05
  • Box Badges No. 2 05
  • Box Badges No. 3 05
  • Box Badges No. 4 05
Button 1 Button 2 Button 3 Button 4 Button 10
Button 1 Button 2 Button 3 Button 4 Button 1
Code Here »

Tag

Tag Blackindex

Tag BlueDraft

Tag SuccessLogic

Tag WarningEdit

Tag RedDelete

Code Here »

List

List with out Link.

  • First List
  • Second List
  • Third List
  • Four List

List with Link.

Code Here »

Form

input type="text"

input type="tel"

input type="password"

input type="date"

input type="datetime"

input type="datetime-local"

input type="month"

input type="email"

input type="number"

input type="search"

input type="range"

input type="time"

input type="week"

input type="select"

textarea

Type of Button, Submit, Reset

Code Here »

Help Class

Position Fixed

.fixed .fixed-top .fixed-bottom

Padding

p = padding value 0 - 100   Example p-10

pl = padding-left value 0 - 100   Example pl-20

pl = padding-right value 0 - 100   Example pl-30

pl = padding-top value 0 - 100   Example pl-80

pl = padding-bottom value 0 - 100   Example pl-100

Margin

ml-auto = margin-left:auto;

mr-auto = margin-right:auto;

m = margin value 0 - 100   Example m-10

ml = margin-left value 0 - 100   Example ml-20

ml = margin-right value 0 - 100   Example ml-30

ml = margin-top value 0 - 100   Example ml-80

ml = margin-bottom value 0 - 100   Example ml-100

Display Properties

Grid System Example .dis-block-{xs|sm|md|lg}

.dis-block{ display: block; }
.dis-inline{ display: inline; }
.dis-inline-block{ display: inline-block; }
.dis-none{ display: none; }
.dis-table{ display: table; }

Order Properties

.order-{xs|sm|md|lg}-{1-12}

Flexbox

Flex Direction

Grid System Example .direction-reverse-{xs|sm|md|lg}

.column-reverse{flex-direction: column-reverse;}
.direction-column{flex-direction: column;}
.direction-reverse{flex-direction: reverse;}
.direction-row{flex-direction: row;}
.direction-row-reverse{flex-direction: row-reverse;}

Justify Content

Grid System Example .justify-center-{xs|sm|md|lg}

.justify-center{justify-content: center;}
.justify-start{justify-content: flex-start;}
.justify-end{justify-content: flex-end;}
.justify-space-around{justify-content: space-around;}
.justify-space-between{justify-content: space-between;}

Align Content

Grid System Example .align-content-between-{xs|sm|md|lg}

.align-content-space-between{align-content: space-between;}
.align-content-space-around{align-content: space-around;}
.align-content-stretch{align-content: stretch;}
.align-content-center{align-content: center;}
.align-content-start{align-content: flex-start;}
.align-content-end{align-content: flex-end;}

Flex Wrap

Grid System Example .wrap-{xs|sm|md|lg}

.wrap{flex-wrap: wrap;}
.nowrap{flex-wrap: nowrap;}
.wrap-reverse{flex-wrap: wrap-reverse;}
.row-wrap{flex-flow: row wrap;}

Align Items

Grid System Example .align-items-center-{xs|sm|md|lg}

.align-items-center{align-items: center;}
.align-items-start{align-items: flex-start;}
.align-items-end{align-items: flex-end;}
.align-items-stretch{align-items: stretch;}
.align-items-baseline{align-items: baseline;}

Align Self

Grid System Example .align-self-stretch-{xs|sm|md|lg}

.align-self-stretch{align-self: stretch;}
.align-self-center{align-self: center;}
.align-self-flex-start{align-self: flex-start;}
.align-self-flex-end{align-self: flex-end;}
.align-self-baseline{align-self: baseline;}
Flexbox Example »

Mobile Menu

Mobile Menu Left Overlay Mobile Menu Right Overlay

Offset Fix

Offset Fixbar. Menu Bar and Any Component Fix to top Dynamic (JS Component). .offset-fix
.offset-fixed{
  position: fixed;
  top: 0px !important;
  width: inherit;
  z-index: 10;
  margin-top: 0px !important;
}
Offset Fixbar Code Here »

Filter / Sorting

Filter 1 - 10 div are Filter or Sorting

JS Filter / Sorting

Try & Code Here »

Photo Gallery Exmple No. 1 Single Image src

Code Here »

Photo Gallery Exmple No. 2 Data Image src

Code Here »

Smooth Click Scroll

Smooth Click Scroll without hamper your URL, useing jQuery Code.

Blue
Warning
Purple
Red
    
Blue Background Color
Warning Background Color
Purple Background Color
Red Background Color