Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

W3.CSS Reference


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


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.