W3-Colors
Class |
Use Case |
|
Background for any HTML element |
|
Text (foreground color) for a HTML element |
|
Background color on-hover for any element |
w3-hover-text-{color}
|
Text (foreground) color on-hover for an element |
By default, W3 uses Material UI colors for its color scheme. This can be changed to use other schemes like Windows colors, Fashion colors, Highway colors etc.
W3-Borders
Class |
Use Case |
|
Add a border on all sides of an element |
w3-border-{side}
( top
, right
, bottom
, left
) |
Add a border to a specific side of an element |
|
Give border a specific color |
w3-hover-border-{color}
|
Border display color on mouse hover |
w3-{side}bar
( left
bottom
, right
, top
) |
Give the border a thick bar on the specified side |
w3-round-{size}
( small
, no-size
, medium
, large
, xlarge
, xxlarge
) |
Round corners of a border |
For a border to be more visible, add a contrasting background color to the element.
W3-Cards
Class |
Use Case |
w3-card-{shadow size}
( no-size
, 2
(2px shadow size), 4
(4px shadow size)) |
Make a card with the specified shadow size |
|
Add a shadow effect (4px exact) when you hover over a card |
To color the background of a card, use the w3-{color}
class.
W3-Round
Class |
Use Case |
|
Adds a border-radius
of 4 around an element. |
w3-round-{size}
( small
, medium
, large
, xlarge
, xxlarge
) |
Adds border-radius
of 2, 4, 8, 16 and 32 respectively around an element. |
|
Displays any content inside a circle. |
This property simply adds rounded corners to any HTML element. You can use the w3-circle
class along with w3-padding
to provide some padding around the element from the circle borders.
W3-Margin
Class |
Use Case |
|
Adds a 16px margin to all sides of an element. |
w3-margin-{side}
( top
, right
, bottom
, left
) |
Adds a 16px margin to the specified side of an element. |
|
Adds a 16px margin to the top and bottom of an element. |
The w3-section
class exists because by default HTML elements do not have a top and bottom margin around them.
W3 Buttons
Class |
Use Case |
|
Creates a rectangular, black by default, button with shadow on hover. |
|
Creates a rectangular button with a grey hover effect. |
|
A horizontal bar that can be used to group buttons together e.g in horizontal menus. Use it as a container for buttons. You can center the buttons using the w3-center
class. |
|
A block defines a full width (100% container width) button. |
|
Can be used to create a circular button. |
|
Can be used to create a ripple (blink) effect when a button is clicked. |
|
Used to color the background of the button. |
|
Used to change the background color on hover. |
w3-round-{size}
( normal (w3-round)
, large
, xlarge
, xxlarge
) |
Used to add round borders to a button. |
w3-{size}
( tiny
, small
, medium
, large
, xlarge
, xxlarge
, xxxlarge
, jumbo
) |
Used to define size of text in the button. |
|
Used to add borders to a button. |
|
Used to define the color of the border around a button. Can be used with w3-round-{size}
to add rounding to the border. |
|
Can be used to add wide-text effect to text in the button. |
w3-padding-{size}
( small
, large
) |
Can be used to add padding around the text in the button. |
w3-{side}-align
( left
, right
) |
Can be used to align the text in the button. |
|
Can be used to make a disabled button. The mouse changes to a no entry sign, and clicking does nothing. |
|
Used to float the button to the left or right of the bar. |
The w3-button
inherits its default color from the parent element in w3CSS V4, and is light-gray by default in V3. To add italics or bolding to a text, you can wrap the text around the appropriate tag e.g <button class="w3-button"><i>Italic</i></button>
. You can use style=width: 80%
to change the width of the button in the parent container.
|
|
W3-Containers
Class |
Use Case |
|
Add a container class to an element |
Containers (e.g <div>
, <article>
, <section>
, <header>
)provide equality i.e common margins, padding, alignments, font colors etc to all HTML container elements.
The w3-container class specifically adds a 16px left and right padding to any HTML element, but no top and bottom padding. Use it with containers. So paragraphs and headings provide margins that help with this.
W3-Panels
Class |
Use Case |
|
Add a panel to an element |
w3-{pale background color}
|
Use a panel as a note area |
|
Use a panel for quotes |
w3-card-{shadow size}
(no-shadow, 2
(2px shadow), 4
(4px shadow)) |
Use a panel as a card (like a flash card) |
w3-round-{size}
( small
, medium
, large
, xlarge
, xxlarge
) |
Round corners of a panel |
w3-{size}
( tiny
, small
, medium
, large
, xlarge
, xxlarge
, xxxlarge
, jumbo
) |
Set size of the panel |
A panel is like a container, but it adds a 16px top and bottom margin to the initial 16px left and right provided by a container. To use panels for notes, add a pale background e.g w3-pale-green
.
To use a panel for quotes, give it a left bar or a right bar a size, and serif font. Panels can also be used as cards by adding it to the W3-Card(s)
classes. See that section for more details.
W3-Fonts
Class |
Use Case |
w3-{font-family}
( serif
, sans-serif
, monospace
, cursive
) |
Make a text font same as the specified family font |
W3-Text
Class |
Use Case |
w3-{side}-align
( left
, right
) |
Align text to the left or right |
|
Center align elements (including text) |
|
Specify wider text |
|
Give opacity to text. Intensity depends on the color used |
W3-Padding
Class |
Use Case |
w3-padding-{number}
( 16
, 24
, 32
, 48
, 64
) |
Adds a top and bottom padding to any HTML element. |
|
Adds an 8px top and bottom and 16px left and right padding. |
|
Adds a 4px top and bottom and 8px left and right padding. |
|
Adds a 12px top and bottom and 24px left and right padding. |
The number defines the intensity of the padding.
W3 Display
Class |
Use Case |
|
Container for w3-display-classes
|
|
Display elements in top left of display container. |
|
Display elements in top right of display container. |
w3-display-bottomleft
|
Display elements in bottom left of display container. |
w3-display-bottomright
|
Display elements in bottom right of display container. |
|
Display elements in the left of display container. |
|
Display elements in the right of display container. |
|
Display elements in the middle of display container. |
|
Display elements in top middle of display container. |
w3-display-bottommiddle
|
Display elements in bottom middle of display container. |
|
Display elements in the specified position in the display container. |
|
Display contents on hover inside the display container. |
|
Float an element to the left ( float: left;
) |
|
Float an element to the left ( float: right;
) |
|
Shows an element ( display: block;
) |
|
Hide an element ( display: none;
) |
|
Adds mobile-first responsiveness to any element. |
Display classes allow you to display HTML elements in specific positions inside other HTML elements. They however must be placed in the w3-display-container
container. The w3-mobile
class displays elements as block elements on mobile devices (By adding display:block
and width:100%;
to an element on screen sizes less than 600px wide).
W3 Notes
Class |
Use Case |
|
The perfect class to display notes and information. The panel by default has no border. |
w3-{side}-bar
( left
, right
, w3-bottombar
, w3-topbar
) |
Used to add side bar to the note (panel), The bar becomes a border for the panel. |
|
You can use this to color the border (bar) from above. |
|
Use a pale background color to make the note more catchy. |
Use w3-border
to add a border around the note (panel) converse to using w3-bar
.
|
