Latest web development tutorials
 

W3.CSS References

❮ Previous Next Chapter ❯

The Container Classes

Class Defines
w3-container Container for HTML content (adds 16px padding left and right) Try it
  Used with color classes Try it
  Used as header Try it
  Used as footer Try it
  Used with w3-leftbar Try it
  Used with w3-bottombar Try it
w3-section Container for HTML content (adds 16px margin top and bottom) Try it
w3-badge Circular badge 8 Try it
w3-tag Rectangular tag  More Later ! Try it
w3-ul Unordered list Try it
w3-display-container Container for w3-display-classes (position an element in the top left, top right, bottom left or the bottom right corner, or in the middle of the container) Try it
w3-image Deprecated. Use w3-display-container instead. Try it
w3-blockquote Removed in 2.0 (use w3-leftbar instead) Try it
w3-code Code container Try it
w3-progress-container Progress bar container 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-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

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

Navigation Classes

Class Defines
w3-navbar Navigation bar Try it
  Collapsible navigation bar Try it
w3-topnav Top navigation bar 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
w3-collapse Fully automatic responsive side navigation Try it
w3-dropnav Dropdown 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-navbar) Try it
  Hoverable dropdown element (used in w3-sidenav) Try it
  Hoverable dropdown element (used in w3-topnav) Try it
w3-accordion Hide and show collapsible content Try it
  Clickable accordion and dropdown used in w3-sidenav Try it
w3-pagination Pagination links Try it

Button Classes

Class Defines
w3-btn Rectangular HTML button Try it
  Rectangular HTML button with ripple effect Try it
w3-btn-floating Circular floating button Try it
  Circular floating button with ripple effect Try it
w3-btn-group Grouped buttons Try it
w3-btn-block Full-width buttons (100%) Try it

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

Utility 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-vertical Specifies vertical text Try it
w3-top Fixed content on top of page Try it
w3-center Centered content 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-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-left Left adjusted content Try it
w3-right Right adjusted content 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-display-container Container for w3-display-classes (position: relative) Try it
w3-display-topleft Position content in the top left corner Try it
w3-display-topright Position content in the top right corner Try it
w3-display-bottomleft Position content in the bottom left corner Try it
w3-display-bottomright Position content in the bottom right corner Try it
w3-display-middle Position content in the middle (horizontally and vertically) Try it
w3-display-topmiddle Position content in the middle at the top of the element Try it
w3-display-bottommiddle Position content in the middle at the bottom of the element Try it
w3-serif Changes the font to serif Try it
w3-opacity Adds opacity to text Try it
  Adds opacity to any element Try it
w3-overlay Creates an overlay effect Try it
w3-text-shadow Adds shadows to text Try it

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 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-red 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 (60% opacity) Try it
w3-hover-shadow Adds shadow 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-hor-4 Padding 4px top and bottom Try it
w3-padding-hor-8 Padding 8px top and bottom Try it
w3-padding-hor-12 Padding 12px top and bottom Try it
w3-padding-hor-16 Padding 16px top and bottom Try it
w3-padding-hor-24 Padding 24px top and bottom Try it
w3-padding-hor-32 Padding 32px top and bottom Try it
w3-padding-hor-48 Padding 48px top and bottom Try it
w3-padding-hor-64 Padding 64px top and bottom Try it
w3-padding-hor-128 Padding 128px top and bottom Try it
w3-padding-ver-4 Padding 4px left and right. Try it
w3-padding-ver-8 Padding 8px left and right. Try it
w3-padding-ver-16 Padding 16px left and right. Try it
w3-padding-ver-24 Padding 24px left and right. Try it
w3-padding-ver-32 Padding 32px left and right. Try it
w3-padding-ver-48 Padding 48px left and right. Try it
w3-padding-ver-64 Padding 64px left and right. Try it

Margin Classes

Class Defines
w3-margin-0 Removes all margins from an element Try it
w3-margin Margin 16px Try it
w3-margin-top Margin top 16px Try it
w3-margin-right Margin right 16px Try it
w3-margin-bottom Margin bottom 16px Try it
w3-margin-left Margin left 16px 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 Chapter ❯