Show Menu

W3.CSS Cheat Sheet by

W3.CSS Classes
css     bootstrap     framework     stylesheet     w3

Container Classes

w3-con­tainer
HTML container
w3-panel
HTML container
w3-badge
Circular badge
w3-tag
Rectan­gular tag
w3-ul
Unordered list
w3-dis­pla­y-c­ont­ainer
For w3-dis­play- classes
w3-code
Code container block
w3-cod­espan
Code container inline

Table Classes

w3-table
HTML table container
w3-striped
Striped table
w3-border
Bordered table
w3-bor­dered
Bordered lines
w3-cen­tered
Centered table
w3-hov­erable
Hoverable table
w3-tab­le-all
All table properties set
w3-res­ponsive
Responsive table

Card Classes

w3-card
Container w/ 2px shadow
w3-card-4
Container w/ 4px shadow

Modal Classes

w3-modal
Modal container
w3-mod­al-­content
Modal pop-up element
w3-tooltip
Tooltip element
w3-text
Tooltip text

Responsive Classes

w3-row
Fluid content row
w3-row­-pa­dding
All cols have default padding
w3-content
Fixed size centered content
w3-half
1/2-of­-screen column
w3-third
1/3-of­-screen column
w3-two­third
2/3-of­-screen column
w3-quarter
1/4-of­-screen column
w3-thr­eeq­uarter
3/4-of­-screen column
w3-col
Fluid content column
w3-rest
Stretch last element to end
l1 to l12
Sizing for large screens
m1 to m12
Sizing for medium screens
s1 to s12
Sizes for small screens
w3-hid­e-small
Hide on small screens
w3-hid­e-m­edium
Hide on medium screens
w3-hid­e-large
Hide on large screens
w3-image
Responsive image
w3-mobile
Make element mobile­-first

Layout Classes

w3-cel­l-row
Container for cells
w3-cell
Layout column
w3-cel­l-top
Aligns cell content (top)
w3-cel­l-m­iddle
Aligns cell content (mid)
w3-cel­l-b­ottom
Aligns cell content (bot)

Bar Classes

w3-bar
Horizontal bar
w3-bar­-block
Vertical bar
w3-bar­-item
Common style for items
w3-sidebar
Side bar
w3-col­lapse
Respon­siv­eness for side bar; requires w3-main container
w3-main
Page container for using w3-col­lapse
 

Dropdown Classes

w3-dro­pdo­wn-­click
Clickable dropdown
w3-dro­pdo­wn-­hover
Hoverable dropdown

Button Classes

w3-button
Gray rectan­gular button
w3-btn
Black rectan­gular button
w3-ripple
Rectan­gular with ripple effect
w3-bar
Group into horizontal bar

Input Classes

w3-input
Input element
w3-check
Checkbox
w3-radio
Radio button
w3-select
Select list
w3-ani­mat­e-input
Slides open on focus

Animation Classes

w3-ani­mat­e-top
Slide from top -300px
w3-ani­mat­e-left
Slide from left -300px
w3-ani­mat­e-b­ottom
Slide from bottom -300px
w3-ani­mat­e-right
Slide from right -300px
w3-ani­mat­e-o­pacity
Shift opacity from 0 to 1
w3-ani­mat­e-zoom
Grows from 0 to 100%
w3-spin
Spin 360 degrees
w3-ani­mat­e-input
Grows input field on focus

Font and Text Classes

w3-tiny
10px font size
w3-small
12px font size
w3-large
18px font size
w3-xlarge
24px font size
w3-xxlarge
32px font size
w3-xxx­large
48px font size
w3-jumbo
64px font size
w3-wide
Wider text
w3-serif
Changes to serif font

Display Classes

w3-center
Centered content
w3-left
Float to left
w3-right
Float to right
w3-lef­t-align
Left aligned text
w3-rig­ht-­align
Right aligned text
w3-justify
Justified text
w3-circle
Round content
w3-hide
Hidden content
w3-show
Visible content
w3-sho­w-i­nli­ne-­block
Visible inline content
w3-top
Top-of­-page fixed content
w3-bottom
End-of­-page fixed content
w3-dis­pla­y-c­ont­ainer
For w3-dis­play- classes
w3-dis­pla­y-t­opleft
Content at top left of box
w3-dis­pla­y-t­opright
Content at top right of box
w3-dis­pla­y-b­ott­omleft
Content at bottom left of box
w3-dis­pla­y-b­ott­omright
Content at bottom right of box
w3-dis­pla­y-left
Content at middle left of box
w3-dis­pla­y-right
Content at middle right of box
w3-dis­pla­y-m­iddle
Content at center of box
w3-dis­pla­y-t­opm­iddle
Content at top center of box
w3-dis­pla­y-b­ott­omm­iddle
Content at bottom center of box
w3-dis­pla­y-p­osition
Content at specified position
w3-dis­pla­y-hover
Content on hover over the box
 

Effect Classes

w3-opacity
Opacity 0.6
w3-opa­cit­y-off
Opacity 1.0
w3-opa­cit­y-min
Opacity 0.75
w3-opa­cit­y-max
Opacity 0.25
w3-gra­ysc­ale-min
Grayscale 50%
w3-gra­yscale
Grayscale 75%
w3-gra­ysc­ale-max
Grayscale 100%
w3-sep­ia-min
Sepia effect 50%
w3-sepia
Sepia effect 75%
w3-sep­ia-max
Sepia effect 100%
w3-overlay
Overlay effect

Color Classes

w3-COLOR
Background color
w3-hov­er-­COLOR
Hover color
w3-tex­t-COLOR
Text color
w3-hov­er-­tex­t-COLOR
Hover text color

Other Hover Classes

w3-hov­er-­bor­der­-COLOR
Color on hover
w3-hov­er-­opacity
Opacity on hover
w3-hov­er-­opa­cit­y-off
Remove opacity on hover
w3-hov­er-­shadow
Shadow on hover
w3-hov­er-­gra­yscale
Grayscale on hover
w3-hov­er-­sepia
Sepia on hover
w3-hov­er-none
Remove hover effects

Round Classes

w3-round
Rounded by 4px
w3-rou­nd-­small
Rounded by 2px
w3-rou­nd-­medium
Rounded by 4px
w3-rou­nd-­large
Rounded by 8px
w3-rou­nd-­xlarge
Rounded by 16px
w3-rou­nd-­xxlarge
Rounded by 32px

Padding Classes

w3-pad­din­g-small
Pad 4px t/b, 8px l/r
w3-padding
Pad 8px t/b, 16px l/r
w3-pad­din­g-large
Pad 12px t/b, 24px l/r
w3-pad­ding-16
Pad 16px t/b
w3-pad­ding-24
Pad 24px t/b
w3-pad­ding-32
Pad 32px t/b
w3-pad­ding-48
Pad 48px t/b
w3-pad­ding-64
Pad 64px t/b

Margin Classes

w3-margin
16px margin
w3-mar­gin-top
16px top margin
w3-mar­gin­-right
16px right margin
w3-mar­gin­-bottom
16px bottom margin
w3-mar­gin­-left
16px left margin
w3-section
16px top and bottom margin

Border Classes

w3-border
Borders all sides
w3-bor­der-top
Border on top
w3-bor­der­-right
Border on right
w3-bor­der­-bottom
Border on bottom
w3-bor­der­-left
Border on left
w3-bor­der-0
No borders
w3-bor­der­-COLOR
Border color if visible
w3-bot­tombar
Thick border on bottom
w3-leftbar
Thick border on left
w3-rig­htbar
Thick border on right
w3-topbar
Thick border on top
w3-hov­er-­bor­der­-COLOR
Hoverable border color

Theme Classes

w3-the­me-­COLOR
Set color theme

Download the W3.CSS Cheat Sheet

3 Pages
//media.cheatography.com/storage/thumb/l3home_w3-css.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

Comments

vikramsingh vikramsingh, 01:14 12 Mar 19

very nice your chetsheet

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Selenium WebDriver Cheat Sheet Cheat Sheet
            Bootstrap Glyphicons Cheat Sheet by James Croft