W3.CSS Reference
W3.CSS Classes
Container Classes
| Class | Defines |
|---|---|
| w3-container | HTML container with 16px left and right padding |
| Used as header | |
| Used as footer | |
| w3-panel | HTML container with 16px left and right padding and 16px top and bottom margin |
| Used to display a note | |
| Used to display a quote | |
| w3-badge | Circular badge |
| w3-tag | Rectangular tag |
| w3-ul | Unordered list |
| w3-display-container | Container for w3-display-classes (enables positioning of elements inside the container) |
| w3-block | Class that can be used to define a full width for any element |
| w3-code | Code container |
| w3-codespan | Inline code container (for code snippets) |
| w3-content | Container for fixed size centered content |
| w3-auto | Container for responsive size centered content |
| w3-stretch | Class that removes right and left margins (especially useful for stretching padded rows (w3-row-padding)) |
Table Classes
| Class | Defines |
|---|---|
| w3-table | Container for an HTML table |
| w3-striped | Striped table |
| w3-border | Bordered table |
| w3-bordered | Bordered lines |
| w3-centered | Centered table |
| w3-hoverable | Hoverable table |
| w3-table-all | All properties set |
| With w3-striped, w3-border, and w3-bordered | |
| With colored head | |
| With w3-responsive | |
| With w3-tiny | |
| With w3-small | |
| With w3-large | |
| With w3-xlarge | |
| With w3-xxlarge | |
| With w3-xxxlarge | |
| With color | |
| With w3-jumbo | |
| w3-responsive | Creates a responsive table |
Card Classes
| Class | Defines |
|---|---|
| w3-card | Same as w3-card-2 |
| w3-card-2 | Container for any HTML content (2px bordered shadow) |
| w3-card-4 | Container for any HTML content (4px bordered shadow) |
Responsive Classes
| Class | Defines |
|---|---|
| w3-row | Container for one row of fluid responsive content |
| w3-row-padding | Row where all columns have a default padding |
| w3-auto | Container for responsive size centered content |
| w3-stretch | Class that removes right and left margins |
| w3-half | Half (1/2) screen column container |
| w3-third | Third (1/3) screen column container |
| w3-twothird | Two third (2/3) screen column container |
| w3-quarter | Quarter (1/4) screen column container |
| w3-threequarter | Three quarters (3/4) screen column container |
| w3-col | Column container for any HTML content |
| w3-rest | Occupies the rest of the column width |
| l1 - l12 | Responsive sizes for large screens |
| m1 - m12 | Responsive sizes for medium screens |
| s1 - s12 | Responsive sizes for small screens |
| w3-hide-small | Hide content on small screens (less than 601px) |
| w3-hide-medium | Hide content on medium screens |
| w3-hide-large | Hide content on large screens (larger than 992px) |
| w3-image | Responsive image |
| w3-mobile | Adds mobile-first responsiveness to any element. Displays elements as block elements on mobile devices. |
Layout Classes
| Class | Defines |
|---|---|
| w3-cell-row | Container for layout columns (cells). |
| w3-cell | Layout column (cell). |
| w3-cell-top | Aligns content at the top of a column (cell). |
| w3-cell-middle | Aligns content at the vertical middle of a column (cell). |
| w3-cell-bottom | Aligns content at the bottom of a column (cell). |
Bar Classes - Navigation
| Class | Defines |
|---|---|
| w3-bar | Horizontal bar |
| w3-bar-block | Vertical bar |
| w3-bar-item | Provides common style for bar items |
| w3-sidebar | Side bar |
| A side bar can contain all types of content | |
| A side bar overlaying main content | |
| A side bar overlaying all main content | |
| A side bar shifting main content to the right | |
| A side bar with an overlay background | |
| A Side bar on the right side | |
| w3-collapse | Used together with w3-sidebar to create a fully automatic responsive side navigation. For this class to work, the page content must be within a "w3-main" class |
| w3-main | Container for page content when using the w3-collapse class for responsive side navigations |
| Fully automatic right-sided responsive side navigation |
Dropdown Classes
| Class | Defines |
|---|---|
| w3-dropdown-click | Clickable dropdown element |
| w3-dropdown-hover | Hoverable dropdown element |
| Hoverable dropdown element (used in w3-bar) | |
| Hoverable dropdown element (used in w3-bar-block) | |
| Hoverable dropdown element (used in w3-sidebar) |
Button Classes
| Class | Defines |
|---|---|
| w3-button | Rectangular button with grey background color on hover |
| w3-btn | Rectangular button with shadows on hover |
| w3-circle | Can be used to create a circular button |
| w3-ripple | Rectangular button with ripple effect |
| Circular floating button with ripple effect | |
| w3-bar | Can be used to group elements (like buttons) in an horizontal bar |
| w3-block | Class that can be used to define a full width w3-button |
| Full width w3-btn | |
| Full width circular button |
Input Classes
| Class | Defines |
|---|---|
| w3-input | Input elements |
| Input form as a card | |
| Input elements (top labels) | |
| Input elements (bottom labels) | |
| w3-check | Checkbox input type |
| w3-radio | Radio input type |
| w3-select | Input select element |
| w3-animate-input | Animates the width of an input to 100% |
Modal Classes
| Class | Defines |
|---|---|
| w3-modal | Modal container |
| w3-modal-content | Modal pop-up element |
| w3-tooltip | Tooltip element |
| w3-text | Tooltip text |
Animation Classes
| Class | Defines |
|---|---|
| w3-animate-top | Animates an element from the top -300px to 0px |
| w3-animate-left | Animates an element from left -300px to 0px |
| w3-animate-bottom | Animates an element from the bottom -300px to 0px |
| w3-animate-right | Animates an element from right -300px to 0px |
| w3-animate-opacity | Animates an element's opacity from 0 to 1 |
| w3-animate-zoom | Animates an element from 0 to 100% in size |
| w3-animate-fading | Animates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out) |
| w3-spin | Spin an icon 360 degrees |
| Spin any element 360 degrees | |
| w3-animate-input | Animates the width of an input field to 100% |
Font and Text Classes
| Class | Defines |
|---|---|
| w3-tiny | Specifies a font size of 10 pixels |
| w3-small | Specifies a font size of 12 pixels |
| w3-large | Specifies a font size of 18 pixels |
| w3-xlarge | Specifies a font size of 24 pixels |
| w3-xxlarge | Specifies a font size of 32 pixels |
| w3-xxxlarge | Specifies a font size of 48 pixels |
| w3-jumbo | Specifies a font size of 64 pixels |
| w3-wide | Specifies a wider text |
| w3-serif | Changes the font to serif |
| w3-sans-serif | Changes the font to sans-serif |
| w3-cursive | Changes the font to cursive |
| w3-monospace | Changes the font to monospace |
Display Classes
| Class | Defines |
|---|---|
| w3-center | Centered content |
| w3-left | Floats an element to the left (float: left) |
| w3-right | Floats an element to the right (float: right) |
| w3-left-align | Left aligned text |
| w3-right-align | Right aligned text |
| w3-justify | Right and left aligned text |
| w3-block | Class that can be used to define a full width for any element |
| w3-circle | Circled content |
| w3-hide | Hidden content (display:none) |
| w3-show | Show content (display:block) |
| w3-show-block | Alias of w3-show (display:block) |
| w3-show-inline-block | Show content as inline-block (display:inline-block) |
| w3-top | Fixed content at the top of a page |
| w3-bottom | Fixed content at the bottom of a page |
| w3-display-container | Container for w3-display-classes (position: relative) |
| w3-display-topleft | Displays content at the top left corner of the w3-display-container |
| w3-display-topright | Displays content at the top right corner of the w3-display-container |
| w3-display-bottomleft | Displays content at the bottom left corner of the w3-display-container |
| w3-display-bottomright | Displays content at the bottom right corner of the w3-display-container |
| w3-display-left | Displays content to the left (middle left) of the w3-display-container |
| w3-display-right | Displays content to the right (middle right) of the w3-display-container |
| w3-display-middle | Displays content in the middle (center) of the w3-display-container |
| w3-display-topmiddle | Displays content at the top middle of the w3-display-container |
| w3-display-bottommiddle | Displays content at the bottom middle of the w3-display-container |
| w3-display-position | Displays content at a specified position in the w3-display-container |
| w3-display-hover | Displays content on hover inside the w3-display-container |
Effect Classes
| Class | Defines |
|---|---|
| w3-opacity | Adds opacity/transparency to an element (opacity: 0.6) |
| Add opacity/transparency to text | |
| w3-opacity-off | Turns off opacity/transparency (opacity: 1) |
| w3-opacity-min | Adds opacity/transparency to an element (opacity: 0.75) |
| w3-opacity-max | Adds opacity/transparency to an element (opacity: 0.25) |
| w3-grayscale-min | Adds a grayscale effect to an element (grayscale: 50%) |
| w3-grayscale | Adds a grayscale effect to an element (grayscale: 75%) |
| w3-grayscale-max | Adds a grayscale effect to an element (grayscale: 100%) |
| w3-sepia-min | Adds a sepia effect to an element (sepia: 50%) |
| w3-sepia | Adds a sepia effect to an element (sepia: 75%) |
| w3-sepia-max | Adds a sepia effect to an element (sepia: 100%) |
| w3-overlay | Creates an overlay effect |
Background Color Classes
| Class | Defines |
|---|---|
| w3-red | Background color red |
| w3-pink | Background color pink |
| w3-purple | Background color purple |
| w3-deep-purple | Background color deep purple |
| w3-indigo | Background color indigo |
| w3-blue | Background color blue |
| w3-light-blue | Background color light blue |
| w3-cyan | Background color cyan |
| w3-aqua | Background color aqua |
| w3-teal | Background color teal |
| w3-green | Background color green |
| w3-light-green | Background color light green |
| w3-lime | Background color lime |
| w3-sand | Background color sand |
| w3-khaki | Background color khaki |
| w3-yellow | Background color yellow |
| w3-amber | Background color amber |
| w3-orange | Background color orange |
| w3-deep-orange | Background color deep orange |
| w3-blue-grey | Background color blue grey |
| w3-brown | Background color brown |
| w3-light-grey | Background color light grey |
| w3-grey | Background color grey |
| w3-dark-grey | Background color dark grey |
| w3-black | Background color black |
| w3-pale-red | Background color pale red |
| w3-pale-yellow | Background color pale yellow |
| w3-pale-green | Background color pale green |
| w3-pale-blue | Background color pale blue |
| w3-transparent | Transparent background-color |
Hover Color Classes
The colors above can also be used as hover classes:
| Class | Defines |
|---|---|
| w3-hover-white | Hover color white |
| w3-hover-black | Hover color black |
| w3-hover-red | Hover color red |
| w3-hover-blue | Hover color blue |
| w3-hover-green | Hover color green |
| w3-hover-aqua | Hover color aqua |
| w3-hover-orange | Hover color orange |
| w3-hover-grey | Hover color grey |
| w3-hover-pale-green | Hover color pale green |
Text Color Classes
| Class | Defines |
|---|---|
| w3-text-red | Text color red |
| w3-text-green | Text color green |
| w3-text-blue | Text color blue |
| w3-text-yellow | Text color yellow |
| w3-text-light-grey | Text color light-grey |
| w3-text-grey | Text color grey |
| w3-text-dark-grey | Text color dark grey |
| w3-text-black | Text color black |
| w3-text-white | Text color white |
| w3-text-pink | Text color pink |
| w3-text-purple | Text color purple |
| w3-text-teal | Text color teal |
| w3-text-light-green | Text color light green |
| w3-text-lime | Text color lime |
| w3-text-deep-purple | Text color deep purple |
| w3-text-indigo | Text color indigo |
| w3-text-light-blue | Text color light blue |
| w3-text-blue-grey | Text color blue grey |
| w3-text-cyan | Text color cyan |
| w3-text-aqua | Text color aqua |
| w3-text-amber | Text color amber |
| w3-text-orange | Text color orange |
| w3-text-deep-orange | Text color deep orange |
| w3-text-sand | Text color sand |
| w3-text-khaki | Text color khaki |
| w3-text-brown | Text color brown |
Hover Text Classes
The text classes above can also be used as hover classes:
| Class | Defines |
|---|---|
| w3-hover-text-red | Hover text color red |
| w3-hover-text-green | Hover text color green |
| w3-hover-text-blue | Hover text color blue |
| w3-hover-text-yellow | Hover text color yellow |
Other Hover Classes
| Class | Defines |
|---|---|
| w3-hover-border-color | Hover border color |
| w3-hover-opacity | Adds transparency to an element on hover (opacity: 0.6) |
| w3-hover-opacity-off | Removes transparency from an element on hover (100% opacity) |
| w3-hover-shadow | Adds shadow to an element on hover |
| w3-hover-grayscale | Adds a black and white (100% grayscale) effect to an element |
| w3-hover-sepia | Adds a sepia effect to an element on hover |
| w3-hover-none | Removes hover effects from an element |
Round Classes
| Class | Defines |
|---|---|
| w3-round | Element rounded (border-radius) 4px |
| w3-round-small | Element rounded (border-radius) 2px |
| w3-round-medium | Element rounded (border-radius) 4px |
| w3-round-large | Element rounded (border-radius) 8px |
| w3-round-xlarge | Element rounded (border-radius) 16px |
| w3-round-xxlarge | Element rounded (border-radius) 32px |
Padding Classes
| Class | Defines |
|---|---|
| w3-padding-small | Padding 4px top and bottom, and 8px left and right. |
| w3-padding | Padding 8px top and bottom, and 16px left and right. |
| w3-padding-large | Padding 12px top and bottom, and 24px left and right. |
| w3-padding-16 | Padding 16px top and bottom |
| w3-padding-24 | Padding 24px top and bottom |
| w3-padding-32 | Padding 32px top and bottom |
| w3-padding-48 | Padding 48px top and bottom |
| w3-padding-64 | Padding 64px top and bottom |
| w3-padding-top-64 | Padding 64px on top |
| w3-padding-top-48 | Padding 48px on top |
| w3-padding-top-32 | Padding 32px on top |
| w3-padding-top-24 | Padding 24px on top |
Margin Classes
| Class | Defines |
|---|---|
| w3-margin | Adds an 16px margin to an element |
| w3-margin-top | Adds an 16px top margin to an element |
| w3-margin-right | Adds an 16px right margin to an element |
| w3-margin-bottom | Adds an 16px bottom margin to an element |
| w3-margin-left | Adds an 16px left margin to an element |
| w3-section | Adds an 16px top and bottom margin to an element |
Border Classes
| Class | Defines |
|---|---|
| w3-border | Borders (top, right, bottom, left) |
| w3-border-top | Border top |
| w3-border-right | Border right |
| w3-border-bottom | Border bottom |
| w3-border-left | Border left |
| w3-border-0 | Removes all borders |
| w3-border-color | Displays any defined borders in a specified color (like red, etc) |
| w3-bottombar | Adds a thick bottom border (bar) to an element |
| w3-leftbar | Adds a thick left border (bar) to an element |
| w3-rightbar | Adds a thick right border (bar) to an element |
| w3-topbar | Adds a thick top border (bar) to an element |
| w3-hover-border-color | Hoverable border color |