Tutorials References Exercises Videos Menu
Create Website Get Certified Upgrade
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP BOOTSTRAP HOW TO W3.CSS C C++ C# REACT R JQUERY DJANGO TYPESCRIPT NODEJS MYSQL

W3.CSS Reference

❮ Previous Next ❯

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

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

Card Classes

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

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

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

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

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

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  

Hover Color Classes

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

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

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

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

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

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


❮ Previous Next ❯