THE WORLD'S LARGEST WEB DEVELOPER SITE

W3.CSS References


W3.CSS Classes


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-example Example container Try it
w3-code Code container Try it
w3-codespan Inline code container (for code snippets) Try it
w3-progress-container Deprecated (Use <div> instead) Try it
w3-progressbar Deprecated (Use <div> instead) Try it

Deprecated classes can be be substituted by other classes or easier solutions.


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 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-responsible 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

Card Classes

Class Defines
w3-card Container for any HTML content (With border) 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
w3-card-8 Container for any HTML content (8px bordered shadow) Try it
w3-card-12 Container for any HTML content (12px bordered shadow) Try it
w3-card-16 Container for any HTML content (16px bordered shadow) Try it
w3-card-24 Container for any HTML content (24px bordered shadow) 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-content Container for fixed size centered content 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

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

Deprecated Layout Classes

Class Defines
w3-layout-container Deprecated (Use w3-cell-row instead) Try it
w3-layout-cell Deprecated (Use w3-cell instead) Try it
w3-layout-col Deprecated (Use w3-mobile instead)
w3-layout-top Deprecated (Use w3-cell-top instead) Try it
w3-layout-middle Deprecated (Use w3-cell-middle instead) Try it
w3-layout-bottom Deprecated (Use w3-cell-bottom instead) Try it

Deprecated classes can be be substituted by other classes or easier solutions.


Navigation Classes

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-sidenav Side navigation bar Try it
  Side navigation bar overlaying main content Try it
  Side navigation bar overlaying all main content Try it
  Side navigation bar shifting main content to the right Try it
  Side navigation bar with an overlay background Try it
  Right-sided side navigation Try it
w3-collapse Used together with w3-sidenav 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-sidenav) Try it
     
w3-navbar Deprecated (Use w3-bar instead) Try it
w3-navitem Deprecated (Use w3-bar-item instead) Try it
w3-topnav Deprecated (Use w3-bar instead) Try it
w3-navblock Deprecated (Use w3-bar-block instead) Try it
w3-accordion Deprecated (Use w3-show and w3-hide instead) Try it
w3-accordion-content Deprecated (Use w3-show and w3-hide instead) Try it
w3-pagination Deprecated (Use w3-bar instead) Try it
w3-dropnav Deprecated (Use w3-bar-block instead) Try it

Deprecated classes can be be substituted by other classes or easier solutions.


Button Classes

Class Defines
w3-button Grey rectangular button Try it
w3-btn Black rectangular button Try it
w3-btn-floating Circular floating button Try it
w3-btn-floating-large Large circular floating 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-btn-block Full-width buttons (100%) Try it
w3-btn-group Grouped buttons Try it
w3-btn-bar Button bars
(Same as w3-btn-group except for different color and hover effects)
Try it

Deprecated classes can be be substituted by other classes or easier solutions.


Input Classes

Class Defines
w3-form Same as w3-padding Try it
  Input form as a card Try it
w3-input Input elements Try it
  Input elements (top labels) Try it
  Input elements (bottom labels) Try it
w3-group Group of HTML elements Try it
w3-label Input label Try it
w3-validate Validates input (Changes color when invalid input) 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

Modal Classes

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

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

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-large Specifies a font size of 20 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-slim Specifies a slimmer text Try it
w3-wide Specifies a wider text Try it
w3-serif Changes the font to serif Try it
w3-vertical Specifies vertical text Try it
w3-text-shadow Adds shadows to text Try it

Display Classes

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-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-hover Displays content on hover inside the w3-display-container 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-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

Background Color Classes

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  

Text Color Classes

Class Defines
w3-text-red Text color red Try it
w3-text-pink Text color pink Try it
w3-text-purple Text color purple Try it
w3-text-deep-purple Text color deep purple Try it
w3-text-indigo Text color indigo Try it
w3-text-blue Text color blue Try it
w3-text-light-blue Text color light blue Try it
w3-text-cyan Text color cyan Try it
w3-text-aqua Text color aqua Try it
w3-text-teal Text color teal Try it
w3-text-green Text color green Try it
w3-text-light-green Text color light green Try it
w3-text-lime Text color lime Try it
w3-text-sand Text color sand Try it
w3-text-khaki Text color khaki Try it
w3-text-yellow Text color yellow 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-blue-grey Text color blue grey Try it
w3-text-brown Text color brown 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

Hover Classes

All 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
     
w3-hover-text-red Hover text color red Try it
w3-hover-text-blue Hover text color blue Try it
w3-hover-text-green Hover text color green Try it
w3-hover-text-purple Hover text color purple Try it
     
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

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
w3-round-jumbo Element rounded (border-radius) 64px Try it

Padding Classes

Class Defines
w3-padding-0 Removes all padding from an element Try it
w3-padding Padding 8px top and bottom, and 16px left and right. Try it
w3-padding-tiny Padding 2px top and bottom, and 4px left and right. Try it
w3-padding-small Padding 4px top and bottom, and 8px left and right. Try it
w3-padding-medium 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-xlarge Padding 16px top and bottom, and 32px left and right. Try it
w3-padding-xxlarge Padding 24px top and bottom, and 48px left and right. Try it
w3-padding-jumbo Padding 32px top and bottom, and 64px left and right. Try it
w3-padding-top Padding top 8px Try it
w3-padding-right Padding right 16px Try it
w3-padding-bottom Padding bottom 8px Try it
w3-padding-left Padding left 16px Try it
w3-padding-4 Padding 4px top and bottom Try it
w3-padding-8 Padding 8px top and bottom Try it
w3-padding-12 Padding 12px top and bottom 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-128 Padding 128px top and bottom Try it

Margin Classes

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-margin-0 Removes all margins from an element Try it
w3-section Adds an 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 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