W3.CSS Reference
W3.CSS Classes
This reference lists all classes and CSS variables available in W3.CSS 6 Beta.
Container Classes
|
| Class |
Defines |
|
| w3-container |
HTML container with 16px left and right padding |
Try it |
| |
Used as header |
Try it |
| |
Used as footer |
Try it |
| w3-panel |
HTML container with 16px left and right padding and 16px top and bottom margin |
Try it |
| |
Used to display a note |
Try it |
| |
Used to display a quote |
Try it |
| w3-badge |
Circular badge |
Try it |
| w3-tag |
Rectangular tag |
Try it |
| w3-ul |
Unordered list |
Try it |
| w3-display-container |
Container for w3-display-classes (enables positioning of elements
inside the container) |
Try it |
| w3-block |
Class that can be used to define a full width for any element |
Try it |
| w3-code |
Code container |
Try it |
| w3-codespan |
Inline code container (for code snippets) |
Try it |
| w3-content |
Centers a page container horizontally with a default maximum width of 980px. It does not center text or inline images. |
Try it |
| w3-auto |
Centers a page container with a maximum width of 1140px above 1205px, 95% above 992px and up to 1205px, and 100% at 992px or less. |
Try it |
| w3-stretch |
Applies -16px inline margins to extend an element beyond its parent's content edges. |
Try it |
| w3-rtl |
Adjusts text direction for right to left (rtl) layout |
Try it |
| w3-ltr |
Adjusts text direction for left to right (ltr) layout |
Try it |
Table Classes
|
| Class |
Defines |
|
| w3-table |
Container for an HTML table |
Try it |
| w3-striped |
Striped table |
Try it |
| w3-border |
Bordered table |
Try it |
| w3-bordered |
Bordered lines |
Try it |
| w3-centered |
Centers text in table header and data cells. |
Try it |
| w3-table-all |
Full-width table with borders and alternating row backgrounds. |
Try it |
| w3-hoverable |
Hoverable table |
Try it |
| w3-responsive |
Adds horizontal scrolling when content, such as a table, is wider than its container. |
Try it |
Card Classes
|
| Class |
Defines |
|
| w3-card |
Same as w3-card-2 |
Try it |
| w3-card-2 |
Adds a light box shadow. Does not assign a background color. |
Try it |
| w3-card-4 |
Adds a stronger box shadow. Does not assign a background color. |
Try it |
Responsive Classes
|
| Class |
Defines |
|
| w3-row |
Container for one row of fluid responsive content |
Try it |
| w3-row-padding |
Row where all columns have a default padding |
Try it |
| w3-auto |
Centers a page container with a maximum width of 1140px above 1205px, 95% above 992px and up to 1205px, and 100% at 992px or less. |
Try it |
| w3-stretch |
Applies -16px inline margins to extend an element beyond its parent's content edges. |
Try it |
| w3-half |
Responsive column that uses half of the row width |
Try it |
| w3-third |
Responsive column that uses one third of the row width |
Try it |
| w3-twothird |
Responsive column that uses two thirds of the row width |
Try it |
| w3-quarter |
Responsive column that uses one quarter of the row width |
Try it |
| w3-threequarter |
Responsive column that uses three quarters of the row width |
Try it |
| w3-col |
Responsive column container for HTML content |
Try it |
| w3-rest |
Occupies the rest of the column width |
Try it |
| |
|
|
| l1 - l12 |
Responsive sizes for large screens |
Try it |
| m1 - m12 |
Responsive sizes for medium screens |
Try it |
| s1 - s12 |
Responsive sizes for small screens |
Try it |
| |
|
|
| w3-hide-small |
Hide content on small screens (less than 601px) |
Try it |
| w3-hide-medium |
Hide content on medium screens |
Try it |
| w3-hide-large |
Hide content on large screens (larger than 992px) |
Try it |
| |
|
|
| w3-image |
Responsive image |
Try it |
| |
|
|
| w3-mobile |
Adds mobile-first responsiveness to any element.
Displays
elements as block elements on mobile devices. |
Try it |
Flexbox Classes
|
| Class |
Defines |
|
| w3-flex |
Flexbox container for flexible one-dimensional layouts |
Try it |
w3-flex-wrap | Creates a flex container and allows items to wrap onto additional lines. | Learn |
w3-flex-column | Creates a flex container with items arranged in a column. | Learn |
w3-flex-start | Creates a flex container and aligns items at the start of the main axis. | Learn |
w3-flex-center | Creates a flex container and centers items along the main axis. | Learn |
w3-flex-end | Creates a flex container and aligns items at the end of the main axis. | Learn |
w3-flex-between | Creates a flex container with equal space between items. | Learn |
w3-flex-around | Creates a flex container with equal space around items; edge spaces are half the spaces between items. | Learn |
w3-flex-evenly | Creates a flex container with equal spaces between items and at both ends. | Learn |
w3-flex-align-start | Creates a flex container and aligns items at the start of the cross axis. | Learn |
w3-flex-align-center | Creates a flex container and centers items along the cross axis. | Learn |
w3-flex-align-end | Creates a flex container and aligns items at the end of the cross axis. | Learn |
w3-flex-align-stretch | Creates a flex container and stretches items with automatic cross sizes to fill their flex line. | Learn |
w3-flex-1 | Flex item: grows and shrinks from a zero basis (flex:1 1 0). | Learn |
w3-flex-auto | Flex item: grows and shrinks from an automatic basis (flex:1 1 auto). | Learn |
w3-flex-none | Flex item: neither grows nor shrinks (flex:none). | Learn |
w3-flex-shrink-0 | Flex item: prevents shrinking (flex-shrink:0). | Learn |
w3-flex-spacer | Adds an automatic margin at the inline start. In a row flex layout, it pushes this item and following items toward the inline end. | Learn |
Grid Classes
The column and auto-grid helpers create grid containers. Span helpers are applied to grid items.
|
| Class |
Defines |
|
| w3-grid |
CSS Grid container for flexible two-dimensional layouts |
Try it |
w3-grid-padding | Creates a grid container with a 16px gap between rows and columns. | Learn |
w3-grid-2 | Creates 2 equal-width columns. The number of columns stays the same on smaller screens. | Learn |
w3-grid-3 | Creates 3 equal-width columns. The number of columns stays the same on smaller screens. | Learn |
w3-grid-4 | Creates 4 equal-width columns. The number of columns stays the same on smaller screens. | Learn |
w3-grid-auto-xsmall | Creates an auto-fitting grid with a 150px minimum column width when space permits. Columns expand to fill the grid and can shrink to fit a narrower container. | Learn |
w3-grid-auto-small | Creates an auto-fitting grid with a 200px minimum column width when space permits. Columns expand to fill the grid and can shrink to fit a narrower container. | Learn |
w3-grid-auto | Creates an auto-fitting grid with a 250px minimum column width when space permits. Columns expand to fill the grid and can shrink to fit a narrower container. | Learn |
w3-grid-auto-large | Creates an auto-fitting grid with a 300px minimum column width when space permits. Columns expand to fill the grid and can shrink to fit a narrower container. | Learn |
w3-grid-auto-xlarge | Creates an auto-fitting grid with a 350px minimum column width when space permits. Columns expand to fill the grid and can shrink to fit a narrower container. | Learn |
w3-grid-span-2 | Makes a grid item span 2 columns. Use a grid with at least 2 columns to avoid creating extra implicit columns. | Learn |
w3-grid-span-3 | Makes a grid item span 3 columns. Use a grid with at least 3 columns to avoid creating extra implicit columns. | Learn |
w3-grid-span-all | Makes a grid item span all explicit columns (grid-column:1 / -1). | Learn |
Grid and Flexbox Gap Classes
Gap helpers set spacing between rows and columns in Grid and between items and lines in Flexbox. They do not create a layout container.
|
| Class | Defines | |
|---|
w3-gap-small | Sets a 8px gap. | Learn |
w3-gap | Sets a 16px gap. | Learn |
w3-gap-large | Sets a 24px gap. | Learn |
Layout Classes
|
| Class |
Defines |
|
| w3-cell-row |
Container for layout columns (cells). |
Try it |
| w3-cell |
Layout column (cell). |
Try it |
| w3-cell-top |
Aligns content at the top of a column (cell). |
Try it |
| w3-cell-middle |
Aligns content at the vertical middle of a column (cell). |
Try it |
| w3-cell-bottom |
Aligns content at the bottom of a column (cell). |
Try it |
Bar Classes - Navigation
|
| Class |
Defines |
|
| w3-bar |
Horizontal bar |
Try it |
| w3-bar-block |
Vertical bar |
Try it |
| w3-bar-item |
Provides common style for bar items |
Try it |
| w3-sidebar |
Side bar |
Try it |
| |
A side bar can contain all types of content |
Try it |
| |
A side bar overlaying main content |
Try it |
| |
A side bar overlaying all main content |
Try it |
| |
A side bar shifting main content to the right |
Try it |
| |
A side bar with an overlay background |
Try it |
| |
A Side bar on the right side |
Try it |
| 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 |
Try it |
| w3-main |
Container for page content when using the w3-collapse class for responsive side navigations |
Try it |
| |
Fully automatic right-sided responsive side navigation |
Try it |
Dropdown Classes
|
| w3-dropdown-click |
Clickable dropdown element |
Try it |
| w3-dropdown-hover |
Shows dropdown content on hover or when keyboard focus is inside the dropdown. |
Try it |
| |
Hoverable dropdown element (used in w3-bar) |
Try it |
| |
Hoverable dropdown element (used in w3-bar-block) |
Try it |
| |
Hoverable dropdown element (used in w3-sidebar) |
Try it |
w3-dropdown-content | Hidden, absolutely positioned dropdown content. Hover dropdowns reveal it automatically; click dropdowns require JavaScript. | Learn |
Button Classes
|
| Class |
Defines |
|
| w3-button |
Rectangular button with grey background color on hover |
Try it |
| w3-btn |
Rectangular button with shadows on hover |
Try it |
| w3-circle |
Can be used to create a circular button |
Try it |
| w3-ripple |
Rectangular button with ripple effect |
Try it |
| |
Circular floating button with ripple effect |
Try it |
| w3-bar |
Can be used to group elements (like buttons) in an horizontal bar |
Try it |
| w3-block |
Class that can be used to define a full width w3-button |
Try it |
| |
Full width w3-btn |
Try it |
| |
Full width circular button |
Try it |
Input Classes
|
| Class |
Defines |
|
| w3-input |
Input elements |
Try it |
| |
Input form as a card |
Try it |
| |
Input elements (top labels) |
Try it |
| |
Input elements (bottom labels) |
Try it |
| w3-check |
Checkbox input type |
Try it |
| w3-radio |
Radio input type |
Try it |
| w3-select |
Input select element |
Try it |
| w3-disabled |
Gives an element a disabled appearance and a not-allowed cursor |
Try it |
| w3-animate-input |
Animates the width of an input to 100% |
Try it |
Modal Classes
|
| Class |
Defines |
|
| w3-modal |
Modal container |
Try it |
| w3-modal-content |
Modal pop-up element |
Try it |
| w3-tooltip |
Container for tooltip text shown on hover or keyboard focus. |
Try it |
| w3-text |
Tooltip text shown when its tooltip is hovered or contains keyboard focus. |
Try it |
Animation Classes
|
| Class |
Defines |
|
| w3-animate-top |
Animates an element from the top -300px to 0px |
Try it |
| w3-animate-left |
Animates an element from left -300px to 0px |
Try it |
| w3-animate-bottom |
Animates an element from the bottom -300px to 0px |
Try it |
| w3-animate-right |
Animates an element from right -300px to 0px |
Try it |
| w3-animate-opacity |
Animates an element's opacity from 0 to 1 |
Try it |
| w3-animate-zoom |
Animates an element from 0 to 100% in size |
Try it |
| w3-animate-fading |
Animates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out) |
Try it |
| w3-spin |
Spin an icon 360 degrees |
Try it |
| |
Spin any element 360 degrees |
Try it |
| w3-animate-input |
Animates the width of an input field to 100% |
Try it |
When the user requests reduced motion, W3.CSS disables the listed animation effects and the input-width transition.
Font and Text Classes
|
| Class |
Defines |
|
| w3-tiny |
Specifies a font size of 10 pixels |
Try it |
| w3-small |
Specifies a font size of 12 pixels |
Try it |
| w3-medium |
Specifies a font size of 15 pixels |
Try it |
| w3-large |
Specifies a font size of 18 pixels |
Try it |
| w3-xlarge |
Specifies a font size of 24 pixels |
Try it |
| w3-xxlarge |
Specifies a font size of 36 pixels |
Try it |
| w3-xxxlarge |
Specifies a font size of 48 pixels |
Try it |
| w3-jumbo |
Specifies a font size of 64 pixels |
Try it |
| w3-wide |
Adds 4px letter spacing. |
Try it |
| w3-serif |
Changes the font to serif |
Try it |
| w3-sans-serif |
Changes the font to sans-serif |
Try it |
| w3-cursive |
Changes the font to cursive |
Try it |
| w3-monospace |
Changes the font to monospace |
Try it |
| w3-center |
Centers text and inline elements inside an element. |
Try it |
Text Style and Direction Classes
| w3-rtl |
Adjusts text direction for right to left (rtl) layout |
Try it |
| w3-ltr |
Adjusts text direction for left to right (ltr) layout |
Try it |
| w3-text-center |
Centers text and inline elements (without !important). |
Try it |
| w3-bold |
Changes the font to bold |
Try it |
| w3-text-bold |
Changes the font to bold (same as w3-bold) |
Try it |
| w3-italic |
Changes the font to italic |
Try it |
| w3-text-italic |
Changes the font to italic (same as w3-italic) |
Try it |
Display Classes
|
| Class |
Defines |
|
| w3-center |
Centers text and inline elements inside an element. |
Try it |
| w3-left |
Floats an element to the left (float: left) |
Try it |
| w3-right |
Floats an element to the right (float: right) |
Try it |
| w3-left-align |
Left aligned text |
Try it |
| w3-right-align |
Right aligned text |
Try it |
| w3-justify |
Right and left aligned text |
Try it |
| w3-block |
Class that can be used to define a full width for any element |
Try it |
| w3-circle |
Circled content |
Try it |
| w3-hide |
Hidden content (display:none) |
Try it |
| w3-show |
Show content (display:block) |
Try it |
| w3-show-block |
Alias of w3-show (display:block) |
Try it |
| w3-show-inline-block |
Show content as inline-block (display:inline-block) |
Try it |
| w3-top |
Fixes an element at the top of the viewport with width:100%. Its horizontal position and maximum width can be customized. |
Try it |
| w3-bottom |
Fixes an element at the bottom of the viewport with width:100%. Its horizontal position and maximum width can be customized. |
Try it |
| w3-display-container |
Container for w3-display-classes (position: relative) |
Try it |
| w3-display-topleft |
Displays content at the top left corner of the w3-display-container |
Try it |
| w3-display-topright |
Displays content at the top right corner of the w3-display-container |
Try it |
| w3-display-bottomleft |
Displays content at the bottom left corner of the w3-display-container |
Try it |
| w3-display-bottomright |
Displays content at the bottom right corner of the w3-display-container |
Try it |
| w3-display-left |
Displays content to the left (middle left) of the w3-display-container |
Try it |
| w3-display-right |
Displays content to the right (middle right) of the w3-display-container |
Try it |
| w3-display-middle |
Displays content in the middle (center) of the w3-display-container |
Try it |
| w3-display-topmiddle |
Displays content at the top middle of the w3-display-container |
Try it |
| w3-display-bottommiddle |
Displays content at the bottom middle of the w3-display-container |
Try it |
| w3-display-position |
Displays content at a specified position in the w3-display-container |
Try it |
| w3-display-hover |
Shows content when its display container is hovered or contains keyboard focus |
Try it |
| w3-clear |
Clears floated children using clearfix pseudo-elements |
Try it |
Effect Classes
|
| Class |
Defines |
|
| w3-opacity |
Adds opacity/transparency to an element (opacity: 0.6) |
Try it |
| |
Add opacity/transparency to text |
Try it |
| w3-opacity-off |
Turns off opacity/transparency (opacity: 1) |
Try it |
| w3-opacity-min |
Adds opacity/transparency to an element (opacity: 0.75) |
Try it |
| w3-opacity-max |
Adds opacity/transparency to an element (opacity: 0.25) |
Try it |
| w3-grayscale |
Adds a grayscale effect to an element (grayscale: 75%) |
Try it |
| w3-greyscale |
Alias of w3-grayscale | |
| w3-grayscale-max |
Adds a grayscale effect to an element (grayscale: 100%) |
Try it |
| w3-greyscale-max |
Alias of w3-grayscale-max | |
| w3-grayscale-min |
Adds a grayscale effect to an element (grayscale: 50%) |
Try it |
| w3-greyscale-min |
Alias of w3-grayscale-min | |
| w3-sepia-min |
Adds a sepia effect to an element (sepia: 50%) |
Try it |
| w3-sepia |
Adds a sepia effect to an element (sepia: 75%) |
Try it |
| w3-sepia-max |
Adds a sepia effect to an element (sepia: 100%) |
Try it |
| w3-overlay |
Creates an overlay effect |
Try it |
Background Color Classes
Danger
Red often indicates a negative situation.
w3-danger
Warning
Orange often indicates a warning.
w3-warning
Success
Green often indicates something positive.
w3-success
Info
Blue often indicates a neutral information.
w3-info
Note
Yellow is often used for notifications.
w3-note
Note
The semantic color classes w3-danger, w3-warning, w3-success, w3-info, and w3-note use customizable
variable CSS colors.
Fixed Colors and Dark Mode
Explicit background, text, and border color classes keep their fixed colors in dark mode.
The gray and grey spellings are interchangeable where both are listed.
Hover Color Classes
|
| Class | Defines | |
|---|
| w3-hover-amber | Applies amber background and its text color on hover | Try it |
| w3-hover-aqua | Applies aqua background and its text color on hover | Try it |
| w3-hover-asphalt | Applies asphalt background and its text color on hover | Try it |
| w3-hover-black | Applies black background and its text color on hover | Try it |
| w3-hover-blue | Applies blue background and its text color on hover | Try it |
| w3-hover-blue-gray | Applies blue-gray background and its text color on hover | Try it |
| w3-hover-blue-grey | Applies blue-grey background and its text color on hover | Try it |
| w3-hover-brown | Applies brown background and its text color on hover | Try it |
| w3-hover-cobalt | Applies cobalt background and its text color on hover | Try it |
| w3-hover-crimson | Applies crimson background and its text color on hover | Try it |
| w3-hover-cyan | Applies cyan background and its text color on hover | Try it |
| w3-hover-dark-gray | Applies dark-gray background and its text color on hover | Try it |
| w3-hover-dark-grey | Applies dark-grey background and its text color on hover | Try it |
| w3-hover-deep-orange | Applies deep-orange background and its text color on hover | Try it |
| w3-hover-deep-purple | Applies deep-purple background and its text color on hover | Try it |
| w3-hover-emerald | Applies emerald background and its text color on hover | Try it |
| w3-hover-gray | Applies gray background and its text color on hover | Try it |
| w3-hover-green | Applies green background and its text color on hover | Try it |
| w3-hover-grey | Applies grey background and its text color on hover | Try it |
| w3-hover-indigo | Applies indigo background and its text color on hover | Try it |
| w3-hover-khaki | Applies khaki background and its text color on hover | Try it |
| w3-hover-light-blue | Applies light-blue background and its text color on hover | Try it |
| w3-hover-light-gray | Applies light-gray background and its text color on hover | Try it |
| w3-hover-light-green | Applies light-green background and its text color on hover | Try it |
| w3-hover-light-grey | Applies light-grey background and its text color on hover | Try it |
| w3-hover-lime | Applies lime background and its text color on hover | Try it |
| w3-hover-olive | Applies olive background and its text color on hover | Try it |
| w3-hover-orange | Applies orange background and its text color on hover | Try it |
| w3-hover-pale-blue | Applies pale-blue background and its text color on hover | Try it |
| w3-hover-pale-green | Applies pale green background and its text color on hover | Try it |
| w3-hover-pale-red | Applies pale-red background and its text color on hover | Try it |
| w3-hover-pale-yellow | Applies pale-yellow background and its text color on hover | Try it |
| w3-hover-paper | Applies paper background and its text color on hover | Try it |
| w3-hover-pink | Applies pink background and its text color on hover | Try it |
| w3-hover-purple | Applies purple background and its text color on hover | Try it |
| w3-hover-red | Applies red background and its text color on hover | Try it |
| w3-hover-sand | Applies sand background and its text color on hover | Try it |
| w3-hover-sienna | Applies sienna background and its text color on hover | Try it |
| w3-hover-taupe | Applies taupe background and its text color on hover | Try it |
| w3-hover-teal | Applies teal background and its text color on hover | Try it |
| w3-hover-white | Applies white background and its text color on hover | Try it |
| w3-hover-yellow | Applies yellow background and its text color on hover | Try it |
Text Color Classes
|
| Class |
Defines |
|
| w3-text-red |
Text color red |
Try it |
| w3-text-green |
Text color green |
Try it |
| w3-text-blue |
Text color blue |
Try it |
| w3-text-yellow |
Text color yellow |
Try it |
| w3-text-light-grey |
Text color light-grey |
Try it |
| w3-text-grey |
Text color grey |
Try it |
| w3-text-dark-grey |
Text color dark grey |
Try it |
| w3-text-black |
Text color black |
Try it |
| w3-text-white |
Text color white |
Try it |
| w3-text-pink |
Text color pink |
Try it |
| w3-text-purple |
Text color purple |
Try it |
| w3-text-teal |
Text color teal |
Try it |
| w3-text-light-green |
Text color light green |
Try it |
| w3-text-lime |
Text color lime |
Try it |
| w3-text-deep-purple |
Text color deep purple |
Try it |
| w3-text-indigo |
Text color indigo |
Try it |
| w3-text-light-blue |
Text color light blue |
Try it |
| w3-text-blue-grey |
Text color blue grey |
Try it |
| w3-text-cyan |
Text color cyan |
Try it |
| w3-text-aqua |
Text color aqua |
Try it |
| w3-text-amber |
Text color amber |
Try it |
| w3-text-orange |
Text color orange |
Try it |
| w3-text-deep-orange |
Text color deep orange |
Try it |
| w3-text-sand |
Text color sand |
Try it |
| w3-text-khaki |
Text color khaki |
Try it |
| w3-text-brown |
Text color brown |
Try it |
| w3-text-blue-gray | Same as w3-text-blue-grey | |
| w3-text-dark-gray | Same as w3-text-dark-grey | |
| w3-text-gray | Same as w3-text-grey | |
| w3-text-light-gray | Same as w3-text-light-grey | |
Hover Text Classes
The text classes above can also be used as hover classes:
|
| Class |
Defines |
|
| w3-hover-text-red |
Hover text color red |
Try it |
| w3-hover-text-green |
Hover text color green |
Try it |
| w3-hover-text-blue |
Hover text color blue |
Try it |
| w3-hover-text-yellow |
Hover text color yellow |
Try it |
| w3-hover-text-amber |
Hover text color amber |
Try it |
| w3-hover-text-aqua |
Hover text color aqua |
Try it |
| w3-hover-text-black |
Hover text color black |
Try it |
| w3-hover-text-blue-gray |
Hover text color blue gray |
Try it |
| w3-hover-text-blue-grey |
Hover text color blue grey |
Try it |
| w3-hover-text-brown |
Hover text color brown |
Try it |
| w3-hover-text-cyan |
Hover text color cyan |
Try it |
| w3-hover-text-dark-gray |
Hover text color dark gray |
Try it |
| w3-hover-text-dark-grey |
Hover text color dark grey |
Try it |
| w3-hover-text-deep-orange |
Hover text color deep orange |
Try it |
| w3-hover-text-deep-purple |
Hover text color deep purple |
Try it |
| w3-hover-text-gray |
Hover text color gray |
Try it |
| w3-hover-text-grey |
Hover text color grey |
Try it |
| w3-hover-text-indigo |
Hover text color indigo |
Try it |
| w3-hover-text-khaki |
Hover text color khaki |
Try it |
| w3-hover-text-light-blue |
Hover text color light blue |
Try it |
| w3-hover-text-light-gray |
Hover text color light gray |
Try it |
| w3-hover-text-light-green |
Hover text color light green |
Try it |
| w3-hover-text-light-grey |
Hover text color light grey |
Try it |
| w3-hover-text-lime |
Hover text color lime |
Try it |
| w3-hover-text-orange |
Hover text color orange |
Try it |
| w3-hover-text-pink |
Hover text color pink |
Try it |
| w3-hover-text-purple |
Hover text color purple |
Try it |
| w3-hover-text-sand |
Hover text color sand |
Try it |
| w3-hover-text-teal |
Hover text color teal |
Try it |
| w3-hover-text-white |
Hover text color white |
Try it |
Other Hover Classes
|
| Class |
Defines |
|
| w3-hover-border-color |
Hover border color |
Try it |
| w3-hover-opacity |
Adds transparency to an element on hover (opacity: 0.6) |
Try it |
| w3-hover-opacity-off |
Removes transparency from an element on hover (100% opacity) |
Try it |
| w3-hover-shadow |
Adds shadow to an element on hover |
Try it |
| w3-hover-grayscale |
Adds a black and white (100% grayscale) effect to an element |
Try it |
| w3-hover-greyscale |
Adds a black and white (100% greyscale) effect to an element |
Try it |
| w3-hover-sepia |
Adds a sepia effect to an element on hover |
Try it |
| w3-hover-none |
Makes the background transparent and removes the shadow on hover. Does not reset every hover property. |
Try it |
Round Classes
|
| Class |
Defines |
|
| w3-round |
Element rounded (border-radius) 4px |
Try it |
| w3-round-small |
Element rounded (border-radius) 2px |
Try it |
| w3-round-medium |
Element rounded (border-radius) 4px |
Try it |
| w3-round-large |
Element rounded (border-radius) 8px |
Try it |
| w3-round-xlarge |
Element rounded (border-radius) 16px |
Try it |
| w3-round-xxlarge |
Element rounded (border-radius) 32px |
Try it |
Padding Classes
|
| Class |
Defines |
|
| w3-padding-small |
Padding 4px top and bottom, and 8px left and right. |
Try it |
| w3-padding |
Padding 8px top and bottom, and 16px left and right. |
Try it |
| w3-padding-large |
Padding 12px top and bottom, and 24px left and right. |
Try it |
| w3-padding-16 |
Padding 16px top and bottom |
Try it |
| w3-padding-24 |
Padding 24px top and bottom |
Try it |
| w3-padding-32 |
Padding 32px top and bottom |
Try it |
| w3-padding-48 |
Padding 48px top and bottom |
Try it |
| w3-padding-64 |
Padding 64px top and bottom |
Try it |
| w3-padding-top-64 |
Padding 64px on top |
Try it |
| w3-padding-top-48 |
Padding 48px on top |
Try it |
| w3-padding-top-32 |
Padding 32px on top |
Try it |
| w3-padding-top-24 |
Padding 24px on top |
Try it |
Margin Classes
|
| Class |
Defines |
|
| w3-margin |
Adds a 16px margin to an element |
Try it |
| w3-margin-top |
Adds a 16px top margin to an element |
Try it |
| w3-margin-right |
Adds a 16px right margin to an element |
Try it |
| w3-margin-bottom |
Adds a 16px bottom margin to an element |
Try it |
| w3-margin-left |
Adds a 16px left margin to an element |
Try it |
| w3-section |
Adds a 16px top and bottom margin to an element |
Try it |
Border Classes
|
| Class |
Defines |
|
| w3-border |
Borders (top, right, bottom, left) |
Try it |
| w3-border-top |
Border top |
Try it |
| w3-border-right |
Border right |
Try it |
| w3-border-bottom |
Border bottom |
Try it |
| w3-border-left |
Border left |
Try it |
| w3-border-0 |
Removes all borders |
Try it |
| w3-border-color |
Displays defined borders in a specified color |
Try it |
| w3-bottombar |
Adds a thick bottom border (bar) to an element |
Try it |
| w3-leftbar |
Adds a thick left border (bar) to an element |
Try it |
| w3-rightbar |
Adds a thick right border (bar) to an element |
Try it |
| w3-topbar |
Adds a thick top border (bar) to an element |
Try it |
| w3-hover-border-color |
Hoverable border color |
Try it |
Dark Mode Class
|
| Class | Defines | |
|---|
w3-dark-mode | Applies dark-mode variable values, a dark background, light text, and color-scheme:dark to a page or section. |
Learn |
Dark mode changes variable-based component colors. Explicit color classes keep their own colors.
CSS Variables
Override these variables in your own CSS after loading W3.CSS. You do not need to edit the framework stylesheet.
The table lists the default light-mode values. Dark mode supplies different values for page, surface, border, inline-code, and hover colors.
|
| Variable | Default Light Value | Controls |
|---|
--w3-font-family | Verdana,sans-serif | Default body font family |
--w3-heading-font-family | "Segoe UI",Arial,sans-serif | Default heading font family |
--w3-font-size | 15px | Default font size |
--w3-line-height | 1.5 | Default line height |
--w3-content-max-width | 980px | Default max-width for w3-content |
--w3-page-bg | #fff | Default page background |
--w3-text-color | #000 | Default text color |
--w3-surface | #fff | Component surface background |
--w3-surface-alt | #f1f1f1 | Alternate surface background, including table stripes and inline code |
--w3-codespan-text | #d2143a | Inline code text color |
--w3-border-color | #ccc | Default border color |
--w3-border-light | #ddd | Table row and list separator color |
--w3-hover-bg | #ccc | Default hover background |
--w3-hover-text | #000 | Default hover text color |
--w3-danger-bg | #dd0000 | Danger background color |
--w3-danger-text | #fff | Danger text color |
--w3-note-bg | #fff599 | Note background color |
--w3-note-text | #000 | Note text color |
--w3-info-bg | #0a6fc2 | Info background color |
--w3-info-text | #fff | Info text color |
--w3-warning-bg | #ffb305 | Warning background color |
--w3-warning-text | #000 | Warning text color |
--w3-success-bg | #008a00 | Success background color |
--w3-success-text | #fff | Success text color |
Override dark-mode colors on .w3-dark-mode after loading W3.CSS.
See W3.CSS Variables for examples.
