Toggle navigation
TUTORIAL HOME
W3.CSS References
❮ Previous Next ❯
W3.CSS Classes
Container
Table
Card
Responsive
Layout
Navigation
Button
Input
Modal
Animation
Font and Text
Display
Effect
Background Color
Text Color
Hover
Round
Padding
Margin
Border
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-code Code container Try it
w3-codespan Inline code container (for code snippets) Try it
w3-example Deprecated (Use w3-panel instead) Try it
w3-progress-container Deprecated (Use <div> instead) Try it
w3-progressbar Deprecated (Use <div> instead) Try it
You can substitute deprecated classes with 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 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
w3-card-8 Deprecated (Use another card class instead) Try it
w3-card-12 Deprecated (Use another card class instead) Try it
w3-card-16 Deprecated (Use another card class instead) Try it
w3-card-24 Deprecated (Use another card class instead) 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
You can substitute deprecated classes with other classes or easier solutions.
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
w3-sidenav Deprecated (Use w3-sidebar instead) 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
You can substitute deprecated classes with other classes or easier solutions.
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 Grey rectangular button Try it
w3-btn Black rectangular 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 Deprecated (Use w3-button w3-block instead) Try it
w3-btn-floating Deprecated (Use w3-button w3-circle instead) Try it
w3-btn-floating-large Deprecated (Use w3-circle instead) Try it
w3-btn-group Deprecated (Use w3-bar instead) Try it
w3-btn-bar Deprecated (Use w3-bar instead) Try it
w3-opennav Deprecated (Use w3-button instead) Try it
w3-closenav Deprecated (Use w3-button instead) Try it
w3-closebtn Deprecated (Use w3-button instead) Try it
You can substitute deprecated classes with other classes or easier solutions.
Input Classes
Class Defines
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-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
w3-form Deprecated (Use w3-container or w3-panel instead) Try it
w3-group Deprecated (use w3-section instead) Try it
w3-label Deprecated (Use <label> instead) Try it
w3-validate Deprecated (Use programmed validation instead) 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-wide Specifies a wider text Try it
w3-serif Changes the font to serif Try it
w3-text-shadow Deprecated (Use CSS3 instead) Try it
w3-slim Deprecated (Use letter-spacing instead) Try it
w3-vertical Deprecated (Use w3-container or w3-panel instead) 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-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
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 Deprecated (Use w3-round-xxlarge instead) 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-tiny Deprecated (Use CSS padding instead) Try it
w3-padding-medium Deprecated (Use w3-padding instead). Try it
w3-padding-xlarge Deprecated (Use CSS padding instead) Try it
w3-padding-xxlarge Deprecated (Use CSS padding instead) Try it
w3-padding-jumbo Deprecated (Use CSS padding instead) Try it
w3-padding-4 Deprecated (Use CSS padding instead) Try it
w3-padding-8 Deprecated (Use CSS padding instead) Try it
w3-padding-12 Deprecated (Use CSS padding instead) Try it
w3-padding-128 Deprecated (Use CSS padding instead) Try it
w3-padding-0 Deprecated (Use CSS padding:0 instead) Try it
w3-padding-left Deprecated (Use CSS padding-left instead) Try it
w3-padding-right Deprecated (Use CSS padding-right instead) Try it
w3-padding-top Deprecated (Use CSS padding-top instead) Try it
w3-padding-bottom Deprecated (Use CSS padding-bottom instead) Try it
You can substitute deprecated classes with other classes or easier solutions.
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
w3-margin-0 Deprecated (Use CSS margin:0 instead) 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 ❯
TUTORIAL HOME
W3.CSS References
❮ Previous Next ❯
W3.CSS Classes
Container
Table
Card
Responsive
Layout
Navigation
Button
Input
Modal
Animation
Font and Text
Display
Effect
Background Color
Text Color
Hover
Round
Padding
Margin
Border
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-code Code container Try it
w3-codespan Inline code container (for code snippets) Try it
w3-example Deprecated (Use w3-panel instead) Try it
w3-progress-container Deprecated (Use <div> instead) Try it
w3-progressbar Deprecated (Use <div> instead) Try it
You can substitute deprecated classes with 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 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
w3-card-8 Deprecated (Use another card class instead) Try it
w3-card-12 Deprecated (Use another card class instead) Try it
w3-card-16 Deprecated (Use another card class instead) Try it
w3-card-24 Deprecated (Use another card class instead) 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
You can substitute deprecated classes with other classes or easier solutions.
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
w3-sidenav Deprecated (Use w3-sidebar instead) 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
You can substitute deprecated classes with other classes or easier solutions.
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 Grey rectangular button Try it
w3-btn Black rectangular 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 Deprecated (Use w3-button w3-block instead) Try it
w3-btn-floating Deprecated (Use w3-button w3-circle instead) Try it
w3-btn-floating-large Deprecated (Use w3-circle instead) Try it
w3-btn-group Deprecated (Use w3-bar instead) Try it
w3-btn-bar Deprecated (Use w3-bar instead) Try it
w3-opennav Deprecated (Use w3-button instead) Try it
w3-closenav Deprecated (Use w3-button instead) Try it
w3-closebtn Deprecated (Use w3-button instead) Try it
You can substitute deprecated classes with other classes or easier solutions.
Input Classes
Class Defines
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-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
w3-form Deprecated (Use w3-container or w3-panel instead) Try it
w3-group Deprecated (use w3-section instead) Try it
w3-label Deprecated (Use <label> instead) Try it
w3-validate Deprecated (Use programmed validation instead) 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-wide Specifies a wider text Try it
w3-serif Changes the font to serif Try it
w3-text-shadow Deprecated (Use CSS3 instead) Try it
w3-slim Deprecated (Use letter-spacing instead) Try it
w3-vertical Deprecated (Use w3-container or w3-panel instead) 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-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
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 Deprecated (Use w3-round-xxlarge instead) 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-tiny Deprecated (Use CSS padding instead) Try it
w3-padding-medium Deprecated (Use w3-padding instead). Try it
w3-padding-xlarge Deprecated (Use CSS padding instead) Try it
w3-padding-xxlarge Deprecated (Use CSS padding instead) Try it
w3-padding-jumbo Deprecated (Use CSS padding instead) Try it
w3-padding-4 Deprecated (Use CSS padding instead) Try it
w3-padding-8 Deprecated (Use CSS padding instead) Try it
w3-padding-12 Deprecated (Use CSS padding instead) Try it
w3-padding-128 Deprecated (Use CSS padding instead) Try it
w3-padding-0 Deprecated (Use CSS padding:0 instead) Try it
w3-padding-left Deprecated (Use CSS padding-left instead) Try it
w3-padding-right Deprecated (Use CSS padding-right instead) Try it
w3-padding-top Deprecated (Use CSS padding-top instead) Try it
w3-padding-bottom Deprecated (Use CSS padding-bottom instead) Try it
You can substitute deprecated classes with other classes or easier solutions.
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
w3-margin-0 Deprecated (Use CSS margin:0 instead) 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 ❯
No comments:
Post a Comment