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