Cheatography
https://cheatography.com
Container Classes
w3-container |
HTML container |
w3-panel |
HTML container |
w3-badge |
Circular badge |
w3-tag |
Rectangular tag |
w3-ul |
Unordered list |
w3-display-container |
For w3-display- classes |
w3-code |
Code container block |
w3-codespan |
Code container inline |
Table Classes
w3-table |
HTML table container |
w3-striped |
Striped table |
w3-border |
Bordered table |
w3-bordered |
Bordered lines |
w3-centered |
Centered table |
w3-hoverable |
Hoverable table |
w3-table-all |
All table properties set |
w3-responsive |
Responsive table |
Card Classes
w3-card |
Container w/ 2px shadow |
w3-card-4 |
Container w/ 4px shadow |
Modal Classes
w3-modal |
Modal container |
w3-modal-content |
Modal pop-up element |
w3-tooltip |
Tooltip element |
w3-text |
Tooltip text |
Responsive Classes
w3-row |
Fluid content row |
w3-row-padding |
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-twothird |
2/3-of-screen column |
w3-quarter |
1/4-of-screen column |
w3-threequarter |
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-hide-small |
Hide on small screens |
w3-hide-medium |
Hide on medium screens |
w3-hide-large |
Hide on large screens |
w3-image |
Responsive image |
w3-mobile |
Make element mobile-first |
Layout Classes
w3-cell-row |
Container for cells |
w3-cell |
Layout column |
w3-cell-top |
Aligns cell content (top) |
w3-cell-middle |
Aligns cell content (mid) |
w3-cell-bottom |
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-collapse |
Responsiveness for side bar; requires w3-main container |
w3-main |
Page container for using w3-collapse |
|
|
Dropdown Classes
w3-dropdown-click |
Clickable dropdown |
w3-dropdown-hover |
Hoverable dropdown |
Button Classes
w3-button |
Gray rectangular button |
w3-btn |
Black rectangular button |
w3-ripple |
Rectangular 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-animate-input |
Slides open on focus |
Animation Classes
w3-animate-top |
Slide from top -300px |
w3-animate-left |
Slide from left -300px |
w3-animate-bottom |
Slide from bottom -300px |
w3-animate-right |
Slide from right -300px |
w3-animate-opacity |
Shift opacity from 0 to 1 |
w3-animate-zoom |
Grows from 0 to 100% |
w3-spin |
Spin 360 degrees |
w3-animate-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-xxxlarge |
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-left-align |
Left aligned text |
w3-right-align |
Right aligned text |
w3-justify |
Justified text |
w3-circle |
Round content |
w3-hide |
Hidden content |
w3-show |
Visible content |
w3-show-inline-block |
Visible inline content |
w3-top |
Top-of-page fixed content |
w3-bottom |
End-of-page fixed content |
w3-display-container |
For w3-display- classes |
w3-display-topleft |
Content at top left of box |
w3-display-topright |
Content at top right of box |
w3-display-bottomleft |
Content at bottom left of box |
w3-display-bottomright |
Content at bottom right of box |
w3-display-left |
Content at middle left of box |
w3-display-right |
Content at middle right of box |
w3-display-middle |
Content at center of box |
w3-display-topmiddle |
Content at top center of box |
w3-display-bottommiddle |
Content at bottom center of box |
w3-display-position |
Content at specified position |
w3-display-hover |
Content on hover over the box |
|
|
Effect Classes
w3-opacity |
Opacity 0.6 |
w3-opacity-off |
Opacity 1.0 |
w3-opacity-min |
Opacity 0.75 |
w3-opacity-max |
Opacity 0.25 |
w3-grayscale-min |
Grayscale 50% |
w3-grayscale |
Grayscale 75% |
w3-grayscale-max |
Grayscale 100% |
w3-sepia-min |
Sepia effect 50% |
w3-sepia |
Sepia effect 75% |
w3-sepia-max |
Sepia effect 100% |
w3-overlay |
Overlay effect |
Color Classes
w3-COLOR |
Background color |
w3-hover-COLOR |
Hover color |
w3-text-COLOR |
Text color |
w3-hover-text-COLOR |
Hover text color |
Other Hover Classes
w3-hover-border-COLOR |
Color on hover |
w3-hover-opacity |
Opacity on hover |
w3-hover-opacity-off |
Remove opacity on hover |
w3-hover-shadow |
Shadow on hover |
w3-hover-grayscale |
Grayscale on hover |
w3-hover-sepia |
Sepia on hover |
w3-hover-none |
Remove hover effects |
Round Classes
w3-round |
Rounded by 4px |
w3-round-small |
Rounded by 2px |
w3-round-medium |
Rounded by 4px |
w3-round-large |
Rounded by 8px |
w3-round-xlarge |
Rounded by 16px |
w3-round-xxlarge |
Rounded by 32px |
Padding Classes
w3-padding-small |
Pad 4px t/b, 8px l/r |
w3-padding |
Pad 8px t/b, 16px l/r |
w3-padding-large |
Pad 12px t/b, 24px l/r |
w3-padding-16 |
Pad 16px t/b |
w3-padding-24 |
Pad 24px t/b |
w3-padding-32 |
Pad 32px t/b |
w3-padding-48 |
Pad 48px t/b |
w3-padding-64 |
Pad 64px t/b |
Margin Classes
w3-margin |
16px margin |
w3-margin-top |
16px top margin |
w3-margin-right |
16px right margin |
w3-margin-bottom |
16px bottom margin |
w3-margin-left |
16px left margin |
w3-section |
16px top and bottom margin |
Border Classes
w3-border |
Borders all sides |
w3-border-top |
Border on top |
w3-border-right |
Border on right |
w3-border-bottom |
Border on bottom |
w3-border-left |
Border on left |
w3-border-0 |
No borders |
w3-border-COLOR |
Border color if visible |
w3-bottombar |
Thick border on bottom |
w3-leftbar |
Thick border on left |
w3-rightbar |
Thick border on right |
w3-topbar |
Thick border on top |
w3-hover-border-COLOR |
Hoverable border color |
Theme Classes
w3-theme-COLOR |
Set color theme |
|
Created By
Metadata
Favourited By
Comments
good
very nice your chetsheet
Add a Comment
Related Cheat Sheets