Cheat Sheet for W3.CSS
| W3 Class | Description | Output | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| W3 Layouts | ||||||||||||||
| w3-container | Define a w3-container |
container
|
||||||||||||
| w3-cell-row | Container fo layout columns | - | ||||||||||||
| w3-cell | Layout Column | - | ||||||||||||
| w3-cell-bottom | Aligns content to bottom of the cell |
-
|
||||||||||||
| w3-cell-middle | Aligns content to middle of the cell |
-
|
||||||||||||
| w3-cell-top | Aligns content to top of the cell |
-
|
||||||||||||
| w3-mobile | Responsive |
-
|
||||||||||||
| w3-row | Create a row |
-
|
||||||||||||
| w3-row-padding | Create a row with padding |
-
|
||||||||||||
| w3-half | Create a column that spans half screen |
-
|
||||||||||||
| w3-third | Create a column that spans third screen |
-
|
||||||||||||
| w3-twothird | Create a column that spans twothird screen |
-
|
||||||||||||
| w3-quarter | Create a column that spans quarter screen |
-
|
||||||||||||
| w3-threequarter | Create a column that spans threequarter screen |
-
|
||||||||||||
| l1 - l12 | Number of columns on large screens |
-
|
||||||||||||
| m1 - m12 | Number of columns on medium screens |
-
|
||||||||||||
| s1 - s12 | Number of columns on small screens |
-
|
||||||||||||
| w3-col | Create a simple column |
-
|
||||||||||||
| w3-rest | Column that spans rest of row width |
-
|
||||||||||||
| w3-hide-small | Don’t show column on a small device |
-
|
||||||||||||
| w3-hide-medium | Don’t show column on a medium device |
-
|
||||||||||||
| w3-hide-large | Don’t show column on a large device |
-
|
||||||||||||
| W3 Colors | ||||||||||||||
| w3-*colorname* | Fill the block with specified color |
w3-red
|
||||||||||||
| w3-pale-*colorname* | Fill the block with specified color pale version |
w3-pale-red
|
||||||||||||
| W3 Helper Classes | ||||||||||||||
| w3-round | Adds 4px border radius |
w3-round
|
||||||||||||
| w3-round-small | Adds 2px border radius |
w3-round-small
|
||||||||||||
| w3-round-medium | Adds 4px border radius |
w3-round-medium
|
||||||||||||
| w3-round-large | Adds 8px border radius |
w3-round-large
|
||||||||||||
| w3-round-xlarge | Adds 16px border radius |
w3-round-xlarge
|
||||||||||||
| w3-round-xxlarge | Adds 31px border radius |
w3-round-xxlarge
|
||||||||||||
| w3-padding | Adds 16 pixels top and bottom padding |
w3-padding
|
||||||||||||
| w3-padding-small | Adds 4 pixels top and bottom, and 8 pixels left and right |
w3-padding-small
|
||||||||||||
| w3-padding | Adds 8 pixels top and bottom, and 16 pixels left and right (default) |
w3-padding
|
||||||||||||
| w3-padding-large | Adds 12 pixels top and bottom padding, 24 pixels left and right |
w3-padding-large
|
||||||||||||
| w3-padding-16 | Adds 16 pixels top and bottom padding |
w3-padding-16
|
||||||||||||
| w3-padding-24 | Adds 24 pixels top and bottom padding |
w3-padding-24
|
||||||||||||
| w3-padding-32 | Adds 32 pixels top and bottom padding |
w3-padding-32
|
||||||||||||
| w3-padding-48 | Adds 48 pixels top and bottom padding |
w3-padding-48
|
||||||||||||
| w3-padding-64 | Adds 64 pixels top and bottom padding |
w3-padding-64
|
||||||||||||
| w3-margin | Adds a 16-pixel margin to all sides |
w3-margin
|
||||||||||||
| w3-margin-top | Adds a 16-pixel margin to top |
w3-margin-top
|
||||||||||||
| w3-margin-right | Adds a 16-pixel margin to right |
w3-margin-right
|
||||||||||||
| w3-margin-bottom | Adds a 16-pixel margin to bottom |
w3-margin-bottom
|
||||||||||||
| w3-margin-left | Adds a 16-pixel margin to left |
w3-margin-left
|
||||||||||||
| w3-section | Adds a 16-pixel margin to top and bottom |
w3-section
|
||||||||||||
| w3-border | Adds borders to all sides (top, bottom, left, right) of the element |
w3-border
|
||||||||||||
| w3-border-top | Adds the border to the top of the element |
w3-border-top
|
||||||||||||
| w3-border-right | Adds the border to the right of the element |
w3-border-right
|
||||||||||||
| w3-border-bottom | Adds the border to the bottom of the element |
w3-border-bottom
|
||||||||||||
| w3-border-left | Adds the border to the left of the element |
w3-border-left
|
||||||||||||
| w3-border-0 | Removes all borders from the element. |
w3-border-0
|
||||||||||||
| w3-border-red | Sets border to specified color (default is black) |
w3-border-red
|
||||||||||||
| w3-hover-border-red | Sets border color to use when hovering over the element |
w3-hover-border-red
|
||||||||||||
| w3-bottombar | Adds a thick 6px border to the bottom of the element. | |||||||||||||
| w3-leftbar | Adds a thick 6px border to the left of the element. | |||||||||||||
| w3-rightbar | Adds a thick 6px border to the right of the element. | |||||||||||||
| w3-topbar | Adds a thick 6px border to the top of the element. | |||||||||||||
| w3-tiny | Font size of 10 pixels. |
w3-tiny
|
||||||||||||
| w3-small | Font size of 12 pixels. |
w3-small
|
||||||||||||
| w3-medium | Font size of 15 pixels. |
w3-medium
|
||||||||||||
| w3-large | Font size of 18 pixels. |
w3-large
|
||||||||||||
| w3-xlarge | Font size of 24 pixels. |
w3-xlarge
|
||||||||||||
| w3-xxlarge | Font size of 36 pixels. |
w3-xxlarge
|
||||||||||||
| w3-xxxlarge | Font size of 48 pixels. |
w3-xxxlarge
|
||||||||||||
| w3-jumbo | Font size of 64 pixels. |
w3-jumbo
|
||||||||||||
| W3 Containers | ||||||||||||||
| w3-block | Sets display property to block |
-
|
||||||||||||
| w3-none | Sets display property to none |
-
|
||||||||||||
| w3-sidebar | To create a sidebar |
-
|
||||||||||||
| w3-bar-block | To display the sidebar |
-
|
||||||||||||
| w3-panel | Similar to the w3-container class, but includes a 16-pixel top and bottom margin to have the panel stand out a bit from the background |
w3-panel
|
||||||||||||
| W3 Text | ||||||||||||||
| w3-text-*color* | Sets text color |
w3-text-red
|
||||||||||||
| w3-left-align | Aligns text to the left |
w3-left-align
|
||||||||||||
| w3-right-align | Aligns text to the right |
w3-right-align
|
||||||||||||
| w3-center | Aligns text to the center |
w3-center
|
||||||||||||
| w3-opacity | Sets the opacity of the element to 60 percent |
w3-opacity
|
||||||||||||
| w3-opacity-min | Sets the opacity of the element to 75 percent |
w3-opacity-min
|
||||||||||||
| w3-opacity-max | Sets the opacity of the element to 25 percent |
w3-opacity-max
|
||||||||||||
| w3-opacity-off | Sets the opacity of the element to 100 percent |
w3-opacity-off
|
||||||||||||
| w3-code | Display some sort of code, such as programming code |
console.log("hi");
|
||||||||||||
| W3 Menu | ||||||||||||||
| w3-bar | An optional color class to the div tag | |||||||||||||
| w3-bar-item | An optional color class to the w3-button class | |||||||||||||
| w3-card | Displays the bar in a “card,” with a shadow |
w3-card
|
||||||||||||
| w3-hover-*color* | Adds a bg color when hovered |
w3-hover-blue
|
||||||||||||
| w3-hover-none | Removes any bg color when hovered |
w3-hover-none
|
||||||||||||
| w3-right | When added to the bar item, causes the item to be aligned to the right side |
w3-right
|
||||||||||||
| w3-dropdown-hover | Create a dropdown which opens on hover |
-
|
||||||||||||
| w3-dropdown-content | specify the dropdown contents |
-
|
||||||||||||
| w3-top | Positions a bar to top of page |
-
|
||||||||||||
| w3-bottoom | Positions a bar to bottom of page |
-
|
||||||||||||
| W3 Tables | ||||||||||||||
| w3-table | Provides the basic table structure, with a width of 100 percent |
|
||||||||||||
| w3-stripped | Adds striping, so alternating rows will have a shaded effect |
|
||||||||||||
| w3-bordered | Adds a bottom border to each row in the table. |
|
||||||||||||
| w3-table-all | Adds all the features (borders and shading) to the table |
|
||||||||||||
| w3-hover-*color* | Change the hover color to something other than a gray background |
|
||||||||||||
| w3-ul | Sets the basic list structure and handles the indentation of the list elements |
|
||||||||||||
| W3 Buttons and Labels | ||||||||||||||
| w3-button | Creates a button that will change color when you hover over it | |||||||||||||
| w3-btn | Creates a button that will display a slight shadow effect when you hover over it |
w3-btn
|
||||||||||||
| w3-disabled | Button is disabled |
w3-disabled
|
||||||||||||
| w3-ripple | A ripple effect is added when button is clicked |
w3-ripple
|
||||||||||||
| w3-badge | A badge : circular label, typically containing a number is created |
w3-badge
10
|
||||||||||||
| w3-tag | Tags : labels on a site, typically used to label some element on the screen is created |
w3-tag
Processing...
|
||||||||||||
| W3 Forms | ||||||||||||||
| w3-input | Change the appearance of the input text box |
|
||||||||||||
| w3-radio | Formats the option buttons |
w3-radio
w3-form
|
||||||||||||
| w3-check | Provides the formatting for check boxes. |
w3-check
w3-form
|
||||||||||||
| w3-select | Provides the formatting for select form tag |
|
||||||||||||
| W3 Animations | ||||||||||||||
| w3-animate-top | Slides element down from the top |
w3-animate-top
|
||||||||||||
| w3-animate-bottom | Slides element down from the bottom |
w3-animate-bottom
|
||||||||||||
| w3-animate-left | Slides element down from the left |
w3-animate-left
|
||||||||||||
| w3-animate-right | Slides element down from the right |
w3-animate-right
|
||||||||||||
| w3-animate-zoom | Performs the zooming animation. |
w3-animate-zoom
|
||||||||||||
| w3-animate-opacity | Causes a fade-in effect |
w3-animate-opacity
|
||||||||||||
| w3-animate-fading | Creates a fade-in and then fade-out effect on the element |
w3-animate-fading
|
||||||||||||
| w3-spin | Causes the element to rotate 360 degrees |
w3-spin...
|
||||||||||||
| W3 Modals | ||||||||||||||
| w3-modal | To create a modal dialog w3-modal is used. |
w3-modal
|
||||||||||||
| W3 Images | ||||||||||||||
| w3-circle | Places the image in a circle |
|
||||||||||||
| w3-rounded | Adds rounded corners |
|
||||||||||||
| w3-bordered | Adds a border around entire image |
|
||||||||||||
| w3-opacity-min | 75 percent opacity |
|
||||||||||||
| w3-opacity | 50 percent opacity |
|
||||||||||||
| w3-opacity-max | 25 percent opacity |
|
||||||||||||
| w3-grayscale-min | Minimal grayscale effect. |
|
||||||||||||
| w3-grayscale | Mostly grayscale image. |
|
||||||||||||
| w3-grayscale | Full grayscale effect. |
|
||||||||||||