Cheatography
https://cheatography.com
Container Classesw3-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 Classesw3-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 Classesw3-card | Container w/ 2px shadow | w3-card-4 | Container w/ 4px shadow |
Modal Classesw3-modal | Modal container | w3-modal-content | Modal pop-up element | w3-tooltip | Tooltip element | w3-text | Tooltip text |
Responsive Classesw3-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 Classesw3-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 Classesw3-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 Classesw3-dropdown-click | Clickable dropdown | w3-dropdown-hover | Hoverable dropdown |
Button Classesw3-button | Gray rectangular button | w3-btn | Black rectangular button | w3-ripple | Rectangular with ripple effect | w3-bar | Group into horizontal bar |
Input Classesw3-input | Input element | w3-check | Checkbox | w3-radio | Radio button | w3-select | Select list | w3-animate-input | Slides open on focus |
Animation Classesw3-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 Classesw3-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 Classesw3-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 Classesw3-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 Classesw3-COLOR | Background color | w3-hover-COLOR | Hover color | w3-text-COLOR | Text color | w3-hover-text-COLOR | Hover text color |
Other Hover Classesw3-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 Classesw3-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 Classesw3-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 Classesw3-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 Classesw3-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 Classesw3-theme-COLOR | Set color theme |
|
Help Us Go Positive!
We offset our carbon usage with Ecologi. Click the link below to help us!
Created By
Metadata
Favourited By
Comments
good
very nice your chetsheet
Add a Comment
Related Cheat Sheets