W3.CSS Reference

W3.CSS Classes

Container Classes

Class	Defines
w3-container	HTML container with 16px left and right padding
	Used as header
	Used as footer
w3-panel	HTML container with 16px left and right padding and 16px top and bottom margin
	Used to display a note
	Used to display a quote
w3-badge	Circular badge
w3-tag	Rectangular tag
w3-ul	Unordered list
w3-display-container	Container for w3-display-classes (enables positioning of elements inside the container)
w3-block	Class that can be used to define a full width for any element
w3-code	Code container
w3-codespan	Inline code container (for code snippets)
w3-content	Container for fixed size centered content
w3-auto	Container for responsive size centered content
w3-stretch	Class that removes right and left margins (especially useful for stretching padded rows (w3-row-padding))

Table Classes

Class	Defines
w3-table	Container for an HTML table
w3-striped	Striped table
w3-border	Bordered table
w3-bordered	Bordered lines
w3-centered	Centered table
w3-hoverable	Hoverable table
w3-table-all	All properties set
	With w3-striped, w3-border, and w3-bordered
	With colored head
	With w3-responsive
	With w3-tiny
	With w3-small
	With w3-large
	With w3-xlarge
	With w3-xxlarge
	With w3-xxxlarge
	With color
	With w3-jumbo
w3-responsive	Creates a responsive table

Card Classes

Class	Defines
w3-card	Same as w3-card-2
w3-card-2	Container for any HTML content (2px bordered shadow)
w3-card-4	Container for any HTML content (4px bordered shadow)

Responsive Classes

Class	Defines
w3-row	Container for one row of fluid responsive content
w3-row-padding	Row where all columns have a default padding
w3-auto	Container for responsive size centered content
w3-stretch	Class that removes right and left margins
w3-half	Half (1/2) screen column container
w3-third	Third (1/3) screen column container
w3-twothird	Two third (2/3) screen column container
w3-quarter	Quarter (1/4) screen column container
w3-threequarter	Three quarters (3/4) screen column container
w3-col	Column container for any HTML content
w3-rest	Occupies the rest of the column width

l1 - l12	Responsive sizes for large screens
m1 - m12	Responsive sizes for medium screens
s1 - s12	Responsive sizes for small screens

w3-hide-small	Hide content on small screens (less than 601px)
w3-hide-medium	Hide content on medium screens
w3-hide-large	Hide content on large screens (larger than 992px)

w3-image	Responsive image

w3-mobile	Adds mobile-first responsiveness to any element. Displays elements as block elements on mobile devices.

Layout Classes

Class	Defines
w3-cell-row	Container for layout columns (cells).
w3-cell	Layout column (cell).
w3-cell-top	Aligns content at the top of a column (cell).
w3-cell-middle	Aligns content at the vertical middle of a column (cell).
w3-cell-bottom	Aligns content at the bottom of a column (cell).

Bar Classes - Navigation

Class	Defines
w3-bar	Horizontal bar
w3-bar-block	Vertical bar
w3-bar-item	Provides common style for bar items
w3-sidebar	Side bar
	A side bar can contain all types of content
	A side bar overlaying main content
	A side bar overlaying all main content
	A side bar shifting main content to the right
	A side bar with an overlay background
	A Side bar on the right side
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
w3-main	Container for page content when using the w3-collapse class for responsive side navigations
	Fully automatic right-sided responsive side navigation

Dropdown Classes

Class	Defines
w3-dropdown-click	Clickable dropdown element
w3-dropdown-hover	Hoverable dropdown element
	Hoverable dropdown element (used in w3-bar)
	Hoverable dropdown element (used in w3-bar-block)
	Hoverable dropdown element (used in w3-sidebar)

Button Classes

Class	Defines
w3-button	Rectangular button with grey background color on hover
w3-btn	Rectangular button with shadows on hover
w3-circle	Can be used to create a circular button
w3-ripple	Rectangular button with ripple effect
	Circular floating button with ripple effect
w3-bar	Can be used to group elements (like buttons) in an horizontal bar
w3-block	Class that can be used to define a full width w3-button
	Full width w3-btn
	Full width circular button

Input Classes

Class	Defines
w3-input	Input elements
	Input form as a card
	Input elements (top labels)
	Input elements (bottom labels)
w3-check	Checkbox input type
w3-radio	Radio input type
w3-select	Input select element
w3-animate-input	Animates the width of an input to 100%

Modal Classes

Class	Defines
w3-modal	Modal container
w3-modal-content	Modal pop-up element
w3-tooltip	Tooltip element
w3-text	Tooltip text

Animation Classes

Class	Defines
w3-animate-top	Animates an element from the top -300px to 0px
w3-animate-left	Animates an element from left -300px to 0px
w3-animate-bottom	Animates an element from the bottom -300px to 0px
w3-animate-right	Animates an element from right -300px to 0px
w3-animate-opacity	Animates an element's opacity from 0 to 1
w3-animate-zoom	Animates an element from 0 to 100% in size
w3-animate-fading	Animates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out)
w3-spin	Spin an icon 360 degrees
	Spin any element 360 degrees
w3-animate-input	Animates the width of an input field to 100%

Font and Text Classes

Class	Defines
w3-tiny	Specifies a font size of 10 pixels
w3-small	Specifies a font size of 12 pixels
w3-large	Specifies a font size of 18 pixels
w3-xlarge	Specifies a font size of 24 pixels
w3-xxlarge	Specifies a font size of 32 pixels
w3-xxxlarge	Specifies a font size of 48 pixels
w3-jumbo	Specifies a font size of 64 pixels
w3-wide	Specifies a wider text
w3-serif	Changes the font to serif
w3-sans-serif	Changes the font to sans-serif
w3-cursive	Changes the font to cursive
w3-monospace	Changes the font to monospace

Display Classes

Class	Defines
w3-center	Centered content
w3-left	Floats an element to the left (float: left)
w3-right	Floats an element to the right (float: right)
w3-left-align	Left aligned text
w3-right-align	Right aligned text
w3-justify	Right and left aligned text
w3-block	Class that can be used to define a full width for any element
w3-circle	Circled content
w3-hide	Hidden content (display:none)
w3-show	Show content (display:block)
w3-show-block	Alias of w3-show (display:block)
w3-show-inline-block	Show content as inline-block (display:inline-block)
w3-top	Fixed content at the top of a page
w3-bottom	Fixed content at the bottom of a page
w3-display-container	Container for w3-display-classes (position: relative)
w3-display-topleft	Displays content at the top left corner of the w3-display-container
w3-display-topright	Displays content at the top right corner of the w3-display-container
w3-display-bottomleft	Displays content at the bottom left corner of the w3-display-container
w3-display-bottomright	Displays content at the bottom right corner of the w3-display-container
w3-display-left	Displays content to the left (middle left) of the w3-display-container
w3-display-right	Displays content to the right (middle right) of the w3-display-container
w3-display-middle	Displays content in the middle (center) of the w3-display-container
w3-display-topmiddle	Displays content at the top middle of the w3-display-container
w3-display-bottommiddle	Displays content at the bottom middle of the w3-display-container
w3-display-position	Displays content at a specified position in the w3-display-container
w3-display-hover	Displays content on hover inside the w3-display-container

Effect Classes

Class	Defines
w3-opacity	Adds opacity/transparency to an element (opacity: 0.6)
	Add opacity/transparency to text
w3-opacity-off	Turns off opacity/transparency (opacity: 1)
w3-opacity-min	Adds opacity/transparency to an element (opacity: 0.75)
w3-opacity-max	Adds opacity/transparency to an element (opacity: 0.25)
w3-grayscale-min	Adds a grayscale effect to an element (grayscale: 50%)
w3-grayscale	Adds a grayscale effect to an element (grayscale: 75%)
w3-grayscale-max	Adds a grayscale effect to an element (grayscale: 100%)
w3-sepia-min	Adds a sepia effect to an element (sepia: 50%)
w3-sepia	Adds a sepia effect to an element (sepia: 75%)
w3-sepia-max	Adds a sepia effect to an element (sepia: 100%)
w3-overlay	Creates an overlay effect

Background Color Classes

Class	Defines
w3-red	Background color red
w3-pink	Background color pink
w3-purple	Background color purple
w3-deep-purple	Background color deep purple
w3-indigo	Background color indigo
w3-blue	Background color blue
w3-light-blue	Background color light blue
w3-cyan	Background color cyan
w3-aqua	Background color aqua
w3-teal	Background color teal
w3-green	Background color green
w3-light-green	Background color light green
w3-lime	Background color lime
w3-sand	Background color sand
w3-khaki	Background color khaki
w3-yellow	Background color yellow
w3-amber	Background color amber
w3-orange	Background color orange
w3-deep-orange	Background color deep orange
w3-blue-grey	Background color blue grey
w3-brown	Background color brown
w3-light-grey	Background color light grey
w3-grey	Background color grey
w3-dark-grey	Background color dark grey
w3-black	Background color black
w3-pale-red	Background color pale red
w3-pale-yellow	Background color pale yellow
w3-pale-green	Background color pale green
w3-pale-blue	Background color pale blue
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
w3-hover-black	Hover color black
w3-hover-red	Hover color red
w3-hover-blue	Hover color blue
w3-hover-green	Hover color green
w3-hover-aqua	Hover color aqua
w3-hover-orange	Hover color orange
w3-hover-grey	Hover color grey
w3-hover-pale-green	Hover color pale green

Text Color Classes

Class	Defines
w3-text-red	Text color red
w3-text-green	Text color green
w3-text-blue	Text color blue
w3-text-yellow	Text color yellow
w3-text-light-grey	Text color light-grey
w3-text-grey	Text color grey
w3-text-dark-grey	Text color dark grey
w3-text-black	Text color black
w3-text-white	Text color white
w3-text-pink	Text color pink
w3-text-purple	Text color purple
w3-text-teal	Text color teal
w3-text-light-green	Text color light green
w3-text-lime	Text color lime
w3-text-deep-purple	Text color deep purple
w3-text-indigo	Text color indigo
w3-text-light-blue	Text color light blue
w3-text-blue-grey	Text color blue grey
w3-text-cyan	Text color cyan
w3-text-aqua	Text color aqua
w3-text-amber	Text color amber
w3-text-orange	Text color orange
w3-text-deep-orange	Text color deep orange
w3-text-sand	Text color sand
w3-text-khaki	Text color khaki
w3-text-brown	Text color brown

Hover Text Classes

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

Class	Defines
w3-hover-text-red	Hover text color red
w3-hover-text-green	Hover text color green
w3-hover-text-blue	Hover text color blue
w3-hover-text-yellow	Hover text color yellow

Other Hover Classes

Class	Defines
w3-hover-border-color	Hover border color
w3-hover-opacity	Adds transparency to an element on hover (opacity: 0.6)
w3-hover-opacity-off	Removes transparency from an element on hover (100% opacity)
w3-hover-shadow	Adds shadow to an element on hover
w3-hover-grayscale	Adds a black and white (100% grayscale) effect to an element
w3-hover-sepia	Adds a sepia effect to an element on hover
w3-hover-none	Removes hover effects from an element

Round Classes

Class	Defines
w3-round	Element rounded (border-radius) 4px
w3-round-small	Element rounded (border-radius) 2px
w3-round-medium	Element rounded (border-radius) 4px
w3-round-large	Element rounded (border-radius) 8px
w3-round-xlarge	Element rounded (border-radius) 16px
w3-round-xxlarge	Element rounded (border-radius) 32px

Padding Classes

Class	Defines
w3-padding-small	Padding 4px top and bottom, and 8px left and right.
w3-padding	Padding 8px top and bottom, and 16px left and right.
w3-padding-large	Padding 12px top and bottom, and 24px left and right.
w3-padding-16	Padding 16px top and bottom
w3-padding-24	Padding 24px top and bottom
w3-padding-32	Padding 32px top and bottom
w3-padding-48	Padding 48px top and bottom
w3-padding-64	Padding 64px top and bottom
w3-padding-top-64	Padding 64px on top
w3-padding-top-48	Padding 48px on top
w3-padding-top-32	Padding 32px on top
w3-padding-top-24	Padding 24px on top

Margin Classes

Class	Defines
w3-margin	Adds an 16px margin to an element
w3-margin-top	Adds an 16px top margin to an element
w3-margin-right	Adds an 16px right margin to an element
w3-margin-bottom	Adds an 16px bottom margin to an element
w3-margin-left	Adds an 16px left margin to an element
w3-section	Adds an 16px top and bottom margin to an element

Border Classes

Class	Defines
w3-border	Borders (top, right, bottom, left)
w3-border-top	Border top
w3-border-right	Border right
w3-border-bottom	Border bottom
w3-border-left	Border left
w3-border-0	Removes all borders
w3-border-color	Displays any defined borders in a specified color (like red, etc)
w3-bottombar	Adds a thick bottom border (bar) to an element
w3-leftbar	Adds a thick left border (bar) to an element
w3-rightbar	Adds a thick right border (bar) to an element
w3-topbar	Adds a thick top border (bar) to an element
w3-hover-border-color	Hoverable border color

ーサイト内のコンテンツについてー
・本サイトは「著作権法第32条」に基づき画像・文章を引用しております。
・掲載している画像・文章の著作権、肖像権等は各権利所有者に帰属致します。
・本サイトは権利を侵害する目的は一切御座いません。
・本サイトの情報は独自に収集したデータであり、書籍・商品の内容を保証するものではありません。
・本サイト、及びリンク先のサイトを利用したことによる損失・損害などのトラブル等に関しまして本サイトは一切の責任と義務を負いません。すべて自己責任でご利用下さい。
・本サイトで使用しているコンテンツで不都合がございましたらご連絡ください・適宜対応いたします。