|
w3-container
|
HTML container
|
|
w3-panel
|
HTML container
|
|
w3-badge
|
Circular badge
|
|
w3-tag
|
Rectangular tag
|
|
w3-ul
|
Unordered list
|
|
w3-display-container
|
For w3-display- classes
|
|
w3-code
|
Code container block
|
|
w3-codespan
|
Code container inline
|
|
w3-table
|
HTML table container
|
|
w3-striped
|
Striped table
|
|
w3-border
|
Bordered table
|
|
w3-bordered
|
Bordered lines
|
|
w3-centered
|
Centered table
|
|
w3-hoverable
|
Hoverable table
|
|
w3-table-all
|
All table properties set
|
|
w3-responsive
|
Responsive table
|
|
w3-card
|
Container w/ 2px shadow
|
|
w3-card-4
|
Container w/ 4px shadow
|
|
w3-modal
|
Modal container
|
|
w3-modal-content
|
Modal pop-up element
|
|
w3-tooltip
|
Tooltip element
|
|
w3-text
|
Tooltip text
|
|
w3-row
|
Fluid content row
|
|
w3-row-padding
|
All cols have default padding
|
|
w3-content
|
Fixed size centered content
|
|
w3-half
|
1/2-of-screen column
|
|
w3-third
|
1/3-of-screen column
|
|
w3-twothird
|
2/3-of-screen column
|
|
w3-quarter
|
1/4-of-screen column
|
|
w3-threequarter
|
3/4-of-screen column
|
|
w3-col
|
Fluid content column
|
|
w3-rest
|
Stretch last element to end
|
|
l1 to l12
|
Sizing for large screens
|
|
m1 to m12
|
Sizing for medium screens
|
|
s1 to s12
|
Sizes for small screens
|
|
w3-hide-small
|
Hide on small screens
|
|
w3-hide-medium
|
Hide on medium screens
|
|
w3-hide-large
|
Hide on large screens
|
|
w3-image
|
Responsive image
|
|
w3-mobile
|
Make element mobile-first
|
|
w3-cell-row
|
Container for cells
|
|
w3-cell
|
Layout column
|
|
w3-cell-top
|
Aligns cell content (top)
|
|
w3-cell-middle
|
Aligns cell content (mid)
|
|
w3-cell-bottom
|
Aligns cell content (bot)
|
|
w3-bar
|
Horizontal bar
|
|
w3-bar-block
|
Vertical bar
|
|
w3-bar-item
|
Common style for items
|
|
w3-sidebar
|
Side bar
|
|
w3-collapse
|
Responsiveness for side bar; requires w3-main container
|
|
w3-main
|
Page container for using w3-collapse
|
|
w3-dropdown-click
|
Clickable dropdown
|
|
w3-dropdown-hover
|
Hoverable dropdown
|
|
w3-button
|
Gray rectangular button
|
|
w3-btn
|
Black rectangular button
|
|
w3-ripple
|
Rectangular with ripple effect
|
|
w3-bar
|
Group into horizontal bar
|
|
w3-input
|
Input element
|
|
w3-check
|
Checkbox
|
|
w3-radio
|
Radio button
|
|
w3-select
|
Select list
|
|
w3-animate-input
|
Slides open on focus
|
|
w3-animate-top
|
Slide from top -300px
|
|
w3-animate-left
|
Slide from left -300px
|
|
w3-animate-bottom
|
Slide from bottom -300px
|
|
w3-animate-right
|
Slide from right -300px
|
|
w3-animate-opacity
|
Shift opacity from 0 to 1
|
|
w3-animate-zoom
|
Grows from 0 to 100%
|
|
w3-spin
|
Spin 360 degrees
|
|
w3-animate-input
|
Grows input field on focus
|
|
w3-tiny
|
10px font size
|
|
w3-small
|
12px font size
|
|
w3-large
|
18px font size
|
|
w3-xlarge
|
24px font size
|
|
w3-xxlarge
|
32px font size
|
|
w3-xxxlarge
|
48px font size
|
|
w3-jumbo
|
64px font size
|
|
w3-wide
|
Wider text
|
|
w3-serif
|
Changes to serif font
|
|
w3-center
|
Centered content
|
|
w3-left
|
Float to left
|
|
w3-right
|
Float to right
|
|
w3-left-align
|
Left aligned text
|
|
w3-right-align
|
Right aligned text
|
|
w3-justify
|
Justified text
|
|
w3-circle
|
Round content
|
|
w3-hide
|
Hidden content
|
|
w3-show
|
Visible content
|
|
w3-show-inline-block
|
Visible inline content
|
|
w3-top
|
Top-of-page fixed content
|
|
w3-bottom
|
End-of-page fixed content
|
|
w3-display-container
|
For w3-display- classes
|
|
w3-display-topleft
|
Content at top left of box
|
|
w3-display-topright
|
Content at top right of box
|
|
w3-display-bottomleft
|
Content at bottom left of box
|
|
w3-display-bottomright
|
Content at bottom right of box
|
|
w3-display-left
|
Content at middle left of box
|
|
w3-display-right
|
Content at middle right of box
|
|
w3-display-middle
|
Content at center of box
|
|
w3-display-topmiddle
|
Content at top center of box
|
|
w3-display-bottommiddle
|
Content at bottom center of box
|
|
w3-display-position
|
Content at specified position
|
|
w3-display-hover
|
Content on hover over the box
|
|
w3-opacity
|
Opacity 0.6
|
|
w3-opacity-off
|
Opacity 1.0
|
|
w3-opacity-min
|
Opacity 0.75
|
|
w3-opacity-max
|
Opacity 0.25
|
|
w3-grayscale-min
|
Grayscale 50%
|
|
w3-grayscale
|
Grayscale 75%
|
|
w3-grayscale-max
|
Grayscale 100%
|
|
w3-sepia-min
|
Sepia effect 50%
|
|
w3-sepia
|
Sepia effect 75%
|
|
w3-sepia-max
|
Sepia effect 100%
|
|
w3-overlay
|
Overlay effect
|
|
w3-COLOR
|
Background color
|
|
w3-hover-COLOR
|
Hover color
|
|
w3-text-COLOR
|
Text color
|
|
w3-hover-text-COLOR
|
Hover text color
|
|
w3-hover-border-COLOR
|
Color on hover
|
|
w3-hover-opacity
|
Opacity on hover
|
|
w3-hover-opacity-off
|
Remove opacity on hover
|
|
w3-hover-shadow
|
Shadow on hover
|
|
w3-hover-grayscale
|
Grayscale on hover
|
|
w3-hover-sepia
|
Sepia on hover
|
|
w3-hover-none
|
Remove hover effects
|
|
w3-round
|
Rounded by 4px
|
|
w3-round-small
|
Rounded by 2px
|
|
w3-round-medium
|
Rounded by 4px
|
|
w3-round-large
|
Rounded by 8px
|
|
w3-round-xlarge
|
Rounded by 16px
|
|
w3-round-xxlarge
|
Rounded by 32px
|
|
w3-padding-small
|
Pad 4px t/b, 8px l/r
|
|
w3-padding
|
Pad 8px t/b, 16px l/r
|
|
w3-padding-large
|
Pad 12px t/b, 24px l/r
|
|
w3-padding-16
|
Pad 16px t/b
|
|
w3-padding-24
|
Pad 24px t/b
|
|
w3-padding-32
|
Pad 32px t/b
|
|
w3-padding-48
|
Pad 48px t/b
|
|
w3-padding-64
|
Pad 64px t/b
|
|
w3-margin
|
16px margin
|
|
w3-margin-top
|
16px top margin
|
|
w3-margin-right
|
16px right margin
|
|
w3-margin-bottom
|
16px bottom margin
|
|
w3-margin-left
|
16px left margin
|
|
w3-section
|
16px top and bottom margin
|
|
w3-border
|
Borders all sides
|
|
w3-border-top
|
Border on top
|
|
w3-border-right
|
Border on right
|
|
w3-border-bottom
|
Border on bottom
|
|
w3-border-left
|
Border on left
|
|
w3-border-0
|
No borders
|
|
w3-border-COLOR
|
Border color if visible
|
|
w3-bottombar
|
Thick border on bottom
|
|
w3-leftbar
|
Thick border on left
|
|
w3-rightbar
|
Thick border on right
|
|
w3-topbar
|
Thick border on top
|
|
w3-hover-border-COLOR
|
Hoverable border color
|
|
w3-theme-COLOR
|
Set color theme
|
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
