HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
The colors above can also be used as hover 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 | Container for fixed size centered content | Try it |
w3-auto | Container for responsive size centered content | Try it |
w3-stretch | Class that removes right and left margins (especially useful for stretching padded rows (w3-row-padding)) | Try it |
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 | Centered table | Try it |
w3-hoverable | Hoverable table | Try it |
w3-table-all | All properties set | Try it |
With w3-striped, w3-border, and w3-bordered | Try it | |
With colored head | Try it | |
With w3-responsive | Try it | |
With w3-tiny | Try it | |
With w3-small | Try it | |
With w3-large | Try it | |
With w3-xlarge | Try it | |
With w3-xxlarge | Try it | |
With w3-xxxlarge | Try it | |
With color | Try it | |
With w3-jumbo | Try it | |
w3-responsive | Creates a responsive table | Try it |
Class | Defines | |
---|---|---|
w3-card | Same as w3-card-2 | Try it |
w3-card-2 | Container for any HTML content (2px bordered shadow) | Try it |
w3-card-4 | Container for any HTML content (4px bordered shadow) | Try it |
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 | Container for responsive size centered content | Try it |
w3-stretch | Class that removes right and left margins | Try it |
w3-half | Half (1/2) screen column container | Try it |
w3-third | Third (1/3) screen column container | Try it |
w3-twothird | Two third (2/3) screen column container | Try it |
w3-quarter | Quarter (1/4) screen column container | Try it |
w3-threequarter | Three quarters (3/4) screen column container | Try it |
w3-col | Column container for any 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 |
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 |
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 |
w3-dropdown-click | Clickable dropdown element | Try it |
w3-dropdown-hover | Hoverable dropdown element | 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 |
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 |
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-animate-input | Animates the width of an input to 100% | Try it |
Class | Defines | |
---|---|---|
w3-modal | Modal container | Try it |
w3-modal-content | Modal pop-up element | Try it |
w3-tooltip | Tooltip element | Try it |
w3-text | Tooltip text | Try it |
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 |
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-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 32 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 | Specifies a wider text | 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 |
Class | Defines | |
---|---|---|
w3-center | Centered content | 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 | Fixed content at the top of a page | Try it |
w3-bottom | Fixed content at the bottom of a page | 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 | Displays content on hover inside the w3-display-container | Try it |
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-min | Adds a grayscale effect to an element (grayscale: 50%) | Try it |
w3-grayscale | Adds a grayscale effect to an element (grayscale: 75%) | Try it |
w3-grayscale-max | Adds a grayscale effect to an element (grayscale: 100%) | Try it |
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 |
Class | Defines | |
---|---|---|
w3-red | Background color red | Try it |
w3-pink | Background color pink | Try it |
w3-purple | Background color purple | Try it |
w3-deep-purple | Background color deep purple | Try it |
w3-indigo | Background color indigo | Try it |
w3-blue | Background color blue | Try it |
w3-light-blue | Background color light blue | Try it |
w3-cyan | Background color cyan | Try it |
w3-aqua | Background color aqua | Try it |
w3-teal | Background color teal | Try it |
w3-green | Background color green | Try it |
w3-light-green | Background color light green | Try it |
w3-lime | Background color lime | Try it |
w3-sand | Background color sand | Try it |
w3-khaki | Background color khaki | Try it |
w3-yellow | Background color yellow | Try it |
w3-amber | Background color amber | Try it |
w3-orange | Background color orange | Try it |
w3-deep-orange | Background color deep orange | Try it |
w3-blue-grey | Background color blue grey | Try it |
w3-brown | Background color brown | Try it |
w3-light-grey | Background color light grey | Try it |
w3-grey | Background color grey | Try it |
w3-dark-grey | Background color dark grey | Try it |
w3-black | Background color black | Try it |
w3-pale-red | Background color pale red | Try it |
w3-pale-yellow | Background color pale yellow | Try it |
w3-pale-green | Background color pale green | Try it |
w3-pale-blue | Background color pale blue | Try it |
w3-transparent | Transparent background-color |
The colors above can also be used as hover classes:
Class | Defines | |
---|---|---|
w3-hover-white | Hover color white | Try it |
w3-hover-black | Hover color black | Try it |
w3-hover-red | Hover color red | Try it |
w3-hover-blue | Hover color blue | Try it |
w3-hover-green | Hover color green | Try it |
w3-hover-aqua | Hover color aqua | Try it |
w3-hover-orange | Hover color orange | Try it |
w3-hover-grey | Hover color grey | Try it |
w3-hover-pale-green | Hover color pale green | Try it |
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 |
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 |
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-sepia | Adds a sepia effect to an element on hover | Try it |
w3-hover-none | Removes hover effects from an element | Try it |
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 |
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 |
Class | Defines | |
---|---|---|
w3-margin | Adds an 16px margin to an element | Try it |
w3-margin-top | Adds an 16px top margin to an element | Try it |
w3-margin-right | Adds an 16px right margin to an element | Try it |
w3-margin-bottom | Adds an 16px bottom margin to an element | Try it |
w3-margin-left | Adds an 16px left margin to an element | Try it |
w3-section | Adds an 16px top and bottom margin to an element | Try it |
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 any defined borders in a specified color (like red, etc) | 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 |