Tutorials References Exercises VideosMenu
Free WebsiteGet CertifiedPro

W3.CSS Reference


W3.CSS Classes


Container Classes

ClassDefines
w3-containerHTML container with 16px left and right paddingTry it
 Used as headerTry it
 Used as footerTry it
w3-panelHTML container with 16px left and right padding and 16px top and bottom marginTry it
 Used to display a noteTry it
 Used to display a quoteTry it
w3-badgeCircular badgeTry it
w3-tagRectangular tagTry it
w3-ulUnordered listTry it
w3-display-containerContainer for w3-display-classes (enables positioning of elements inside the container)Try it
w3-blockClass that can be used to define a full width for any elementTry it
w3-codeCode containerTry it
w3-codespanInline code container (for code snippets)Try it
w3-contentContainer for fixed size centered contentTry it
w3-autoContainer for responsive size centered contentTry it
w3-stretchClass that removes right and left margins (especially useful for stretching padded rows (w3-row-padding))Try it

Table Classes

ClassDefines
w3-tableContainer for an HTML tableTry it
w3-stripedStriped tableTry it
w3-borderBordered tableTry it
w3-borderedBordered linesTry it
w3-centeredCentered tableTry it
w3-hoverableHoverable tableTry it
w3-table-allAll properties setTry it
 With w3-striped, w3-border, and w3-borderedTry it
 With colored headTry it
 With w3-responsiveTry it
 With w3-tinyTry it
 With w3-smallTry it
 With w3-largeTry it
 With w3-xlargeTry it
 With w3-xxlargeTry it
 With w3-xxxlargeTry it
 With colorTry it
 With w3-jumboTry it
w3-responsiveCreates a responsive tableTry it


Card Classes

ClassDefines
w3-cardSame as w3-card-2Try it
w3-card-2Container for any HTML content (2px bordered shadow)Try it
w3-card-4Container for any HTML content (4px bordered shadow)Try it

Responsive Classes

ClassDefines
w3-rowContainer for one row of fluid responsive contentTry it
w3-row-paddingRow where all columns have a default paddingTry it
w3-autoContainer for responsive size centered contentTry it
w3-stretchClass that removes right and left marginsTry it
w3-halfHalf (1/2) screen column containerTry it
w3-thirdThird (1/3) screen column containerTry it
w3-twothirdTwo third (2/3) screen column containerTry it
w3-quarterQuarter (1/4) screen column containerTry it
w3-threequarterThree quarters (3/4) screen column containerTry it
w3-colColumn container for any HTML contentTry it
w3-restOccupies the rest of the column widthTry it
   
l1 - l12Responsive sizes for large screensTry it
m1 - m12Responsive sizes for medium screensTry it
s1 - s12Responsive sizes for small screensTry it
  
w3-hide-smallHide content on small screens (less than 601px)Try it
w3-hide-mediumHide content on medium screensTry it
w3-hide-largeHide content on large screens (larger than 992px)Try it
  
w3-imageResponsive imageTry it
  
w3-mobileAdds mobile-first responsiveness to any element.
Displays elements as block elements on mobile devices.
Try it

Layout Classes

ClassDefines
w3-cell-rowContainer for layout columns (cells).Try it
w3-cellLayout column (cell).Try it
w3-cell-topAligns content at the top of a column (cell).Try it
w3-cell-middleAligns content at the vertical middle of a column (cell).Try it
w3-cell-bottomAligns content at the bottom of a column (cell).Try it

Bar Classes - Navigation

ClassDefines
w3-barHorizontal barTry it
w3-bar-blockVertical barTry it
w3-bar-itemProvides common style for bar itemsTry it
w3-sidebarSide barTry it
 A side bar can contain all types of contentTry it
 A side bar overlaying main contentTry it
 A side bar overlaying all main contentTry it
 A side bar shifting main content to the rightTry it
 A side bar with an overlay backgroundTry it
 A Side bar on the right sideTry it
w3-collapseUsed 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" classTry it
w3-mainContainer for page content when using the w3-collapse class for responsive side navigationsTry it
 Fully automatic right-sided responsive side navigationTry it

Dropdown Classes

w3-dropdown-clickClickable dropdown elementTry it
w3-dropdown-hoverHoverable dropdown elementTry 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

ClassDefines
w3-buttonRectangular button with grey background color on hoverTry it
w3-btnRectangular button with shadows on hoverTry it
w3-circleCan be used to create a circular buttonTry it
w3-rippleRectangular button with ripple effectTry it
 Circular floating button with ripple effectTry it
w3-barCan be used to group elements (like buttons) in an horizontal barTry it
w3-blockClass that can be used to define a full width w3-buttonTry it
 Full width w3-btnTry it
 Full width circular buttonTry it

Input Classes

ClassDefines
w3-inputInput elementsTry it
 Input form as a cardTry it
 Input elements (top labels)Try it
 Input elements (bottom labels)Try it
w3-checkCheckbox input typeTry it
w3-radioRadio input typeTry it
w3-selectInput select elementTry it
w3-animate-inputAnimates the width of an input to 100%Try it

Modal Classes

ClassDefines
w3-modalModal containerTry it
w3-modal-contentModal pop-up elementTry it
w3-tooltipTooltip elementTry it
w3-textTooltip textTry it

Animation Classes

ClassDefines
w3-animate-topAnimates an element from the top -300px to 0pxTry it
w3-animate-leftAnimates an element from left -300px to 0pxTry it
w3-animate-bottomAnimates an element from the bottom -300px to 0pxTry it
w3-animate-rightAnimates an element from right -300px to 0pxTry it
w3-animate-opacityAnimates an element's opacity from 0 to 1Try it
w3-animate-zoomAnimates an element from 0 to 100% in sizeTry it
w3-animate-fadingAnimates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out)Try it
w3-spinSpin an icon 360 degreesTry it
 Spin any element 360 degreesTry it
w3-animate-inputAnimates the width of an input field to 100%Try it

Font and Text Classes

ClassDefines
w3-tinySpecifies a font size of 10 pixelsTry it
w3-smallSpecifies a font size of 12 pixelsTry it
w3-largeSpecifies a font size of 18 pixelsTry it
w3-xlargeSpecifies a font size of 24 pixelsTry it
w3-xxlargeSpecifies a font size of 32 pixelsTry it
w3-xxxlargeSpecifies a font size of 48 pixelsTry it
w3-jumboSpecifies a font size of 64 pixelsTry it
w3-wideSpecifies a wider textTry it
w3-serifChanges the font to serifTry it
w3-sans-serifChanges the font to sans-serifTry it
w3-cursiveChanges the font to cursiveTry it
w3-monospaceChanges the font to monospaceTry it

Display Classes

ClassDefines
w3-centerCentered contentTry it
w3-leftFloats an element to the left (float: left)Try it
w3-rightFloats an element to the right (float: right)Try it
w3-left-alignLeft aligned textTry it
w3-right-alignRight aligned textTry it
w3-justifyRight and left aligned textTry it
w3-blockClass that can be used to define a full width for any elementTry it
w3-circleCircled content Try it
w3-hideHidden content (display:none)Try it
w3-showShow content (display:block)Try it
w3-show-blockAlias of w3-show (display:block)Try it
w3-show-inline-blockShow content as inline-block (display:inline-block)Try it
w3-topFixed content at the top of a pageTry it
w3-bottomFixed content at the bottom of a pageTry it
w3-display-containerContainer for w3-display-classes (position: relative)Try it
w3-display-topleftDisplays content at the top left corner of the w3-display-containerTry it
w3-display-toprightDisplays content at the top right corner of the w3-display-containerTry it
w3-display-bottomleftDisplays content at the bottom left corner of the w3-display-containerTry it
w3-display-bottomrightDisplays content at the bottom right corner of the w3-display-containerTry it
w3-display-leftDisplays content to the left (middle left) of the w3-display-containerTry it
w3-display-rightDisplays content to the right (middle right) of the w3-display-containerTry it
w3-display-middleDisplays content in the middle (center) of the w3-display-containerTry it
w3-display-topmiddleDisplays content at the top middle of the w3-display-containerTry it
w3-display-bottommiddleDisplays content at the bottom middle of the w3-display-containerTry it
w3-display-positionDisplays content at a specified position in the w3-display-containerTry it
w3-display-hoverDisplays content on hover inside the w3-display-containerTry it

Effect Classes

ClassDefines
w3-opacityAdds opacity/transparency to an element (opacity: 0.6)Try it
 Add opacity/transparency to textTry it
w3-opacity-offTurns off opacity/transparency (opacity: 1)Try it
w3-opacity-minAdds opacity/transparency to an element (opacity: 0.75)Try it
w3-opacity-maxAdds opacity/transparency to an element (opacity: 0.25)Try it
w3-grayscale-minAdds a grayscale effect to an element (grayscale: 50%)Try it
w3-grayscaleAdds a grayscale effect to an element (grayscale: 75%)Try it
w3-grayscale-maxAdds a grayscale effect to an element (grayscale: 100%)Try it
w3-sepia-minAdds a sepia effect to an element (sepia: 50%)Try it
w3-sepiaAdds a sepia effect to an element (sepia: 75%)Try it
w3-sepia-maxAdds a sepia effect to an element (sepia: 100%)Try it
w3-overlayCreates an overlay effectTry it

Background Color Classes

ClassDefines
w3-redBackground color redTry it
w3-pinkBackground color pinkTry it
w3-purpleBackground color purpleTry it
w3-deep-purpleBackground color deep purpleTry it
w3-indigoBackground color indigoTry it
w3-blueBackground color blueTry it
w3-light-blueBackground color light blueTry it
w3-cyanBackground color cyanTry it
w3-aquaBackground color aquaTry it
w3-tealBackground color tealTry it
w3-greenBackground color greenTry it
w3-light-greenBackground color light greenTry it
w3-limeBackground color limeTry it
w3-sandBackground color sandTry it
w3-khakiBackground color khakiTry it
w3-yellowBackground color yellowTry it
w3-amberBackground color amberTry it
w3-orangeBackground color orangeTry it
w3-deep-orangeBackground color deep orangeTry it
w3-blue-greyBackground color blue greyTry it
w3-brownBackground color brownTry it
w3-light-greyBackground color light greyTry it
w3-greyBackground color greyTry it
w3-dark-greyBackground color dark greyTry it
w3-blackBackground color blackTry it
w3-pale-redBackground color pale redTry it
w3-pale-yellowBackground color pale yellowTry it
w3-pale-greenBackground color pale greenTry it
w3-pale-blueBackground color pale blueTry it
w3-transparentTransparent background-color 

Hover Color Classes

The colors above can also be used as hover classes:

ClassDefines
w3-hover-whiteHover color whiteTry it
w3-hover-blackHover color blackTry it
w3-hover-redHover color redTry it
w3-hover-blueHover color blueTry it
w3-hover-greenHover color greenTry it
w3-hover-aquaHover color aquaTry it
w3-hover-orangeHover color orangeTry it
w3-hover-greyHover color greyTry it
w3-hover-pale-greenHover color pale greenTry it

Text Color Classes

ClassDefines
w3-text-redText color redTry it
w3-text-greenText color greenTry it
w3-text-blueText color blueTry it
w3-text-yellowText color yellowTry it
w3-text-light-greyText color light-greyTry it
w3-text-greyText color greyTry it
w3-text-dark-greyText color dark greyTry it
w3-text-blackText color blackTry it
w3-text-whiteText color whiteTry it
w3-text-pinkText color pinkTry it
w3-text-purpleText color purpleTry it
w3-text-tealText color tealTry it
w3-text-light-greenText color light greenTry it
w3-text-limeText color limeTry it
w3-text-deep-purpleText color deep purpleTry it
w3-text-indigoText color indigoTry it
w3-text-light-blueText color light blueTry it
w3-text-blue-greyText color blue greyTry it
w3-text-cyanText color cyanTry it
w3-text-aquaText color aquaTry it
w3-text-amberText color amberTry it
w3-text-orangeText color orangeTry it
w3-text-deep-orangeText color deep orangeTry it
w3-text-sandText color sandTry it
w3-text-khakiText color khakiTry it
w3-text-brownText color brownTry it

Hover Text Classes

The text classes above can also be used as hover classes:

ClassDefines
w3-hover-text-redHover text color redTry it
w3-hover-text-greenHover text color greenTry it
w3-hover-text-blueHover text color blueTry it
w3-hover-text-yellowHover text color yellowTry it

Other Hover Classes

ClassDefines
w3-hover-border-colorHover border colorTry it
w3-hover-opacityAdds transparency to an element on hover (opacity: 0.6)Try it
w3-hover-opacity-offRemoves transparency from an element on hover (100% opacity)Try it
w3-hover-shadowAdds shadow to an element on hoverTry it
w3-hover-grayscaleAdds a black and white (100% grayscale) effect to an elementTry it
w3-hover-sepiaAdds a sepia effect to an element on hoverTry it
w3-hover-noneRemoves hover effects from an elementTry it

Round Classes

ClassDefines
w3-roundElement rounded (border-radius) 4pxTry it
w3-round-smallElement rounded (border-radius) 2pxTry it
w3-round-mediumElement rounded (border-radius) 4pxTry it
w3-round-largeElement rounded (border-radius) 8pxTry it
w3-round-xlargeElement rounded (border-radius) 16pxTry it
w3-round-xxlargeElement rounded (border-radius) 32pxTry it

Padding Classes

ClassDefines
w3-padding-smallPadding 4px top and bottom, and 8px left and right.Try it
w3-paddingPadding 8px top and bottom, and 16px left and right.Try it
w3-padding-largePadding 12px top and bottom, and 24px left and right.Try it
w3-padding-16Padding 16px top and bottomTry it
w3-padding-24Padding 24px top and bottomTry it
w3-padding-32Padding 32px top and bottomTry it
w3-padding-48Padding 48px top and bottomTry it
w3-padding-64Padding 64px top and bottomTry it
w3-padding-top-64Padding 64px on topTry it
w3-padding-top-48Padding 48px on topTry it
w3-padding-top-32Padding 32px on topTry it
w3-padding-top-24Padding 24px on topTry it

Margin Classes

ClassDefines
w3-marginAdds an 16px margin to an elementTry it
w3-margin-topAdds an 16px top margin to an elementTry it
w3-margin-rightAdds an 16px right margin to an elementTry it
w3-margin-bottomAdds an 16px bottom margin to an elementTry it
w3-margin-leftAdds an 16px left margin to an elementTry it
w3-sectionAdds an 16px top and bottom margin to an elementTry it

Border Classes

ClassDefines
w3-borderBorders (top, right, bottom, left) Try it
w3-border-topBorder topTry it
w3-border-rightBorder rightTry it
w3-border-bottomBorder bottomTry it
w3-border-leftBorder leftTry it
w3-border-0Removes all bordersTry it
w3-border-colorDisplays any defined borders in a specified color (like red, etc)Try it
w3-bottombarAdds a thick bottom border (bar) to an elementTry it
w3-leftbarAdds a thick left border (bar) to an elementTry it
w3-rightbarAdds a thick right border (bar) to an elementTry it
w3-topbarAdds a thick top border (bar) to an elementTry it
w3-hover-border-colorHoverable border colorTry it