Classe	Descrizione	Esempio
w3-container	contenitore HTML con 16px padding a destra ea sinistra	Esempio
	Usato come intestazione	Esempio
	Usato come piè di pagina	Esempio
w3-panel	contenitore HTML con 16px a sinistra ea destra imbottitura e 16px superiore e margine inferiore	Esempio
	Utilizzato per visualizzare una nota	Esempio
	Utilizzato per visualizzare un preventivo	Esempio
w3-badge	distintivo circolare	Esempio
w3-tag	tag rettangolare	Esempio
w3-ul	Lista non ordinata	Esempio
w3-display-container	Contenitore per w3-schermo e classi (permette il posizionamento degli elementi all'interno del contenitore)	Esempio
w3-block	Classe che può essere utilizzata per definire una larghezza completa per ogni elemento	Esempio
w3-code	contenitore Codice	Esempio
w3-codespan	contenitore codice inline (per frammenti di codice)	Esempio
w3-content	Contenitore per contenuto centrato a dimensione fissa	Esempio
w3-auto	Contenitore per contenuti centrati in dimensioni reattive	Esempio
w3-stretch	Classe che rimuove i margini destro e sinistro (particolarmente utile per allungare le righe imbottite (w3-row-padding))	Esempio

Classe	Descrizione	Esempio
w3-table	Contenitore per una tabella HTML	Esempio
w3-striped	tavolo a righe	Esempio
w3-border	tavolo delimitata	Esempio
w3-bordered	linee bordate	Esempio
w3-centered	tavolo centrato	Esempio
w3-hoverable	tavolo Hoverable	Esempio
w3-table-all	Tutte le proprietà impostate	Esempio
	Con w3-striped, w3-border, e w3-bordered	Esempio
	Con la testa colorata	Esempio
	with w3-responsive	Esempio
	Con w3-tiny	Esempio
	Con w3-small	Esempio
	Con w3-large	Esempio
	Con w3-xlarge	Esempio
	Con w3-xxLarge	Esempio
	Con w3-xxxLarge	Esempio
	con il colore	Esempio
	Con w3-jumbo	Esempio
w3-responsive	Crea una tabella reattivo	Esempio

Classe	Descrizione	Esempio
w3-card	Uguale a w3-card-2	Esempio
w3-card-2	Contenitore per qualsiasi contenuto HTML (2px ombra Delimitata)	Esempio
w3-card-4	Contenitore per qualsiasi contenuto HTML (4px ombra Delimitata)	Esempio

Classe	Descrizione	Esempio
w3-row	Contenitore per una riga di contenuti reattivo fluido	Esempio
w3-row-padding	Riga in cui tutte le colonne hanno un'imbottitura di default	Esempio
w3-auto	Contenitore per contenuti centrati in dimensioni reattive	Esempio
w3-stretch	Classe che rimuove i margini destro e sinistro	Esempio
w3 half	Metà contenitore colonna schermo (1/2)	Esempio
w3-third	Terzo contenitore della colonna dello schermo (1/3)	Esempio
w3-twothird	Due terzo contenitore colonna schermo (2/3)	Esempio
w3-quarter	Quarto contenitore colonna schermo (1/4)	Esempio
w3-threequarter	Tre quarti contenitore colonna schermo (3/4)	Esempio
w3-col	Contenitore Colonna per qualsiasi contenuto HTML	Esempio
w3-rest	Occupa il resto della larghezza della colonna	Esempio
l1 - l12	dimensioni reattivo per grandi schermi	Esempio
m1 - m12	dimensioni reattivi per schermi di medie	Esempio
s1 - s12	dimensioni reattivo per piccoli schermi	Esempio
w3-hide-small	Nascondi contenuti su schermi di piccole dimensioni (meno di 601px)	Esempio
w3-hide-medium	Hide contenuti su schermi di media	Esempio
w3-hide-large	Nascondi contenuti su schermi di grandi dimensioni (più grande di 992px)	Esempio
w3-image	immagine responsive	Esempio
w3-mobile	Aggiunge la reattività prima-mobile a qualsiasi elemento. Consente di visualizzare elementi come elementi di blocco su dispositivi mobili.	Esempio

Classe	Descrizione	Esempio
w3-cell-row	Contenitore per colonne di layout (celle).	Esempio
w3-cell	colonna Layout (cella).	Esempio
w3-cell-top	Allinea il contenuto nella parte superiore di una colonna (cella).	Esempio
w3-cell-middle	Allinea il contenuto al centro verticale di una colonna (cella).	Esempio
w3-cell-bottom	Allinea il contenuto nella parte inferiore di una colonna (cella).	Esempio

Classe	Descrizione	Esempio
w3-bar	Barra orizzontale	Esempio
w3-bar-block	barra verticale	Esempio
w3-bar-item	Fornisce stile comune per gli elementi della barra	Esempio
w3-sidebar	barra laterale	Esempio
	Una barra laterale può contenere tutti i tipi di contenuti	Esempio
	Una barra laterale sovrapponendo contenuto principale	Esempio
	Una barra laterale sovrapponendo tutti i contenuti principali	Esempio
	Una barra di spostamento laterale contenuto principale a destra	Esempio
	Una barra laterale con un background di sovrapposizione	Esempio
	Una barra laterale sul lato destro	Esempio
w3-collapse	Utilizzato insieme w3-barra laterale per creare un completamente automatico di navigazione laterale reattivo. Per questa classe di funzioni, il contenuto della pagina deve essere all'interno di una classe "w3-main"	Esempio
w3-main	Contenitore per il contenuto della pagina quando si utilizza la classe di w3-collasso per le navigazioni laterali reattivi	Esempio
	lato destro di navigazione laterale reattivo completamente automatica	Esempio

Classe	Descrizione	Esempio
w3-dropdown-click	Elemento discesa cliccabile	Esempio
w3-dropdown-hover	Elemento discesa Hoverable	Esempio
	elemento discesa Hoverable (utilizzato in w3-bar)	Esempio
	elemento discesa Hoverable (utilizzato in w3-bar-block)	Esempio
	elemento discesa Hoverable (utilizzato in w3-barra laterale)	Esempio

Classe	Descrizione	Esempio
w3-button	pulsante rettangolare con il grigio colore di sfondo al passaggio del mouse	Esempio
w3-btn	pulsante rettangolare con ombre su librazione	Esempio
w3-circle	Può essere usato per creare un pulsante circolare	Esempio
w3-ripple	Pulsante rettangolare con effetto a catena	Esempio
	Pulsante galleggiante circolare con effetto a catena	Esempio
w3-bar	Può essere usato per elementi del gruppo (come pulsanti) in una barra orizzontale	Esempio
w3-block	Classe che può essere utilizzata per definire un pulsante w3 a larghezza intera	Esempio
	Larghezza intera w3-btn	Esempio
	Pulsante circolare a larghezza piena	Esempio

Classe	Descrizione	Esempio
w3-input	elementi di input	Esempio
	modulo di ingresso come una carta	Esempio
	elementi di input (top etichette)	Esempio
	elementi di input (etichette in basso)	Esempio
w3-check	tipo di ingresso Casella	Esempio
w3-radio	Tipo ingresso radio	Esempio
w3-select	elemento di selezione in ingresso	Esempio
w3-animate-input	Anima la larghezza di un ingresso 100%	Esempio

Classe	Descrizione	Esempio
w3-modal	contenitore modale	Esempio
w3-modal-content	elemento pop-up modale	Esempio
w3-tooltip	elemento tooltip	Esempio
w3-text	testo tooltip	Esempio

Classe	Descrizione	Esempio
w3-animate-top	Anima un elemento dalla -300px cima a 0px	Esempio
w3-animate-left	Anima un elemento da sinistra a -300px 0PX	Esempio
w3-animate-bottom	Anima un elemento dal basso verso -300px 0px	Esempio
w3-animate-right	Anima un elemento da -300px diritto di 0px	Esempio
w3-animate-opacity	Anima l'opacità di un elemento da 0 a 1	Esempio
w3-animate-zoom	Anima un elemento da 0 a 100% di dimensione	Esempio
w3-animate-fading	Anima opacità di un elemento da 0 a 1 e da 1 a 0 (dissolvenze IN e OUT)	Esempio
w3-spin	Spin un'icona 360 gradi	Esempio
	Spin qualsiasi elemento 360 gradi	Esempio
w3-animate-input	Anima la larghezza di un campo di ingresso 100%	Esempio

Classe	Descrizione	Esempio
w3-tiny	Specifica una dimensione del carattere di 10 pixel	Esempio
w3-small	Specifica una dimensione di carattere di 12 pixel	Esempio
w3-large	Specifica una dimensione del carattere di 18 pixel	Esempio
w3-xLarge	Specifica una dimensione del carattere di 24 pixel	Esempio
w3-xxLarge	Specifica una dimensione del carattere di 32 pixel	Esempio
w3-xxxLarge	Specifica una dimensione del carattere di 48 pixel	Esempio
w3-jumbo	Specifica una dimensione del carattere di 64 pixel	Esempio
w3-wide	Specifica un testo più ampio	Esempio
w3-serif	Cambia il tipo di carattere per serif	Esempio

Classe	Descrizione	Esempio
w3-center	contenuti centrato	Esempio
w3-left	Galleggia un elemento a fianco (float: sinistra)	Esempio
w3-right	Galleggia un elemento a destra (float: right)	Esempio
w3-left-align	testo allineato a sinistra	Esempio
w3-right-align	testo allineato a destra	Esempio
w3-justify	Destra e testo allineato a sinistra	Esempio
w3-block	Classe che può essere utilizzata per definire una larghezza completa per ogni elemento	Esempio
w3-circle	contenuti cerchiato	Esempio
w3-hide	contenuti nascosti (display: none)	Esempio
w3-show	Mostra contenuto (display: block)	Esempio
w3-show-block	Alias ​​di w3-spettacolo (display: block)	Esempio
w3-show-inline-block	Mostra contenuto come inline-block (display: inline-block)	Esempio
w3-top	contenuto fisso nella parte superiore di una pagina	Esempio
w3-bottom	contenuti fissi in fondo a una pagina	Esempio
w3-display-container	Contenitore per w3-schermo e classi (posizione: relativa)	Esempio
w3-display-topleft	il contenuto viene visualizzato nell'angolo in alto a sinistra del w3-display-container	Esempio
w3-display-topright	il contenuto viene visualizzato nell'angolo in alto a destra del w3-display-container	Esempio
w3-display-bottomleft	il contenuto viene visualizzato in basso a sinistra angolo del w3-display-container	Esempio
w3-display-bottomright	il contenuto viene visualizzato nell'angolo in basso a destra del w3-display-container	Esempio
w3-display-left	Consente di visualizzare contenuti a sinistra (a sinistra al centro) del w3-display-container	Esempio
w3-display-right	Consente di visualizzare contenuti a destra (al centro a destra) del w3-display-container	Esempio
w3-display-middle	Consente di visualizzare contenuti nel mezzo (al centro) del w3-display-container	Esempio
w3-display-topmiddle	il contenuto viene visualizzato in alto al centro del w3-display-container	Esempio
w3-display-bottommiddle	il contenuto visualizzato nella parte inferiore centrale della w3-display-container	Esempio
w3-display-position	il contenuto viene visualizzato in una posizione specificata nella w3-display-container	Esempio
w3-display-hover	Consente di visualizzare contenuti al passaggio del mouse all'interno del w3-display-container	Esempio

Classe	Descrizione	Esempio
w3-opacity	Aggiunge l'opacità / trasparenza ad un elemento (opacità: 0,6)	Esempio
	Aggiungere l'opacità / trasparenza al testo	Esempio
w3-opacity-off	Si spegne l'opacità / trasparenza (opacità: 1)	Esempio
w3-opacity-min	Aggiunge l'opacità / trasparenza ad un elemento (opacità: 0,75)	Esempio
w3-opacity-max	Aggiunge l'opacità / trasparenza ad un elemento (opacità: 0.25)	Esempio
w3-grayscale-min	Aggiunge un effetto scala di grigi ad un elemento (scala di grigi: 50%)	Esempio
w3-grayscale	Aggiunge un effetto scala di grigi ad un elemento (scala di grigi: 75%)	Esempio
w3-grayscale-max	Aggiunge un effetto scala di grigi ad un elemento (scala di grigi: 100%)	Esempio
w3-sepia-min	Aggiunge un effetto seppia ad un elemento (seppia: 50%)	Esempio
w3-sepia	Aggiunge un effetto seppia ad un elemento (seppia: 75%)	Esempio
w3-sepia-max	Aggiunge un effetto seppia ad un elemento (seppia: 100%)	Esempio
w3-overlay	Crea un effetto di sovrapposizione	Esempio

Classe	Descrizione	Esempio
w3-red	Sfondo rosso	Esempio
w3-pink	Sfondo di colore rosa,	Esempio
w3-purple	sfondo a colori viola	Esempio
w3-deep-purple	Colore di sfondo viola scuro	Esempio
w3-indigo	Sfondo di colore indaco	Esempio
w3-blue	colore blu di sfondo	Esempio
w3-light-blue	Sfondo di colore azzurro	Esempio
w3-cyan	ciano colore di sfondo	Esempio
w3-aqua	Colore sfondo aqua	Esempio
w3-teal	Sfondo di colore verde acqua	Esempio
w3-green	Sfondo verde	Esempio
w3-light-green	Sfondo luce di colore verde	Esempio
w3-lime	Sfondo di colore della calce	Esempio
w3-sand	Colore di sfondo sabbia	Esempio
w3-khaki	Sfondo colore kaki	Esempio
w3-yellow	Colore di sfondo giallo	Esempio
w3-amber	Sfondo colore ambrato	Esempio
w3-orange	Sfondo colore arancione	Esempio
w3-deep-orange	Sfondo di colore arancio intenso	Esempio
w3-blue-grey	Background blu colore grigio	Esempio
w3-brown	Sfondo di colore marrone	Esempio
w3-light-grey	Sfondo grigio chiaro colore	Esempio
w3-grey	Sfondo grigio	Esempio
w3-dark-grey	Sfondo di colore grigio scuro	Esempio
w3-black	Sfondo nero	Esempio
w3-pale-red	Sfondo di colore rosso chiaro	Esempio
w3-pale-yellow	Colore di sfondo giallo pallido	Esempio
w3-pale-green	Sfondo di colore verde pallido	Esempio
w3-pale-blue	Sfondo di colore azzurro pallido	Esempio
w3-transparent	Trasparente background-color

Classe	Descrizione	Esempio
w3-hover-white	colore bianco al passaggio del mouse	Esempio
w3-hover-black	Hover colore nero	Esempio
w3-hover-red	Hover colore rosso	Esempio
w3-hover-blue	colore blu al passaggio del mouse	Esempio
w3-hover-green	Hover colore verde	Esempio
w3-hover-aqua	Hover colore aqua	Esempio
w3-hover-orange	colore arancione al passaggio del mouse	Esempio
w3-hover-grey	colore grigio al passaggio del mouse	Esempio
w3-hover-pale-green	Hover colore verde pallido	Esempio

Classe	Descrizione	Esempio
w3-text-red	Testo di colore rosso	Esempio
w3-text-green	Testo colore verde	Esempio
w3-text-blue	colore blu del testo	Esempio
w3-text-yellow	Colore testo gialla	Esempio
w3-text-light-grey	Colore testo grigio chiaro	Esempio
w3-text-grey	colore grigio del testo	Esempio
w3-text-dark-grey	Colore testo grigio scuro	Esempio
w3-text-black	colore del testo nero	Esempio
w3-text-white	colore bianco del testo	Esempio
w3-text-pink	Testo di colore rosa,	Esempio
w3-text-purple	Colore testo viola	Esempio
w3-text-teal	Testo di colore verde acqua	Esempio
w3-text-light-green	Testo luce di colore verde	Esempio
w3-text-lime	Testo di colore della calce	Esempio
w3-text-deep-purple	Colore testo deep purple	Esempio
w3-text-indaco	Testo di colore indaco	Esempio
w3-text-light-blue	Testo di colore azzurro	Esempio
w3-text-blue-grey	Colore testo grigio blu	Esempio
w3-text-cyan	ciano colore del testo	Esempio
w3-text-aqua	Testo di colore aqua	Esempio
w3-text-amber	Testo colore ambrato	Esempio
w3-text-orange	colore arancione del testo	Esempio
w3-text-deep-orange	Colore testo profondo arancione	Esempio
w3-text-sand	Testo color sabbia	Esempio
w3-text-khaki	Testo colore kaki	Esempio
w3-text-brown	Testo di colore marrone	Esempio

Classe	Descrizione	Esempio
w3-hover-text-red	Passa il testo di colore rosso	Esempio
w3-hover-text-green	Passa il testo di colore verde	Esempio
w3-hover-text-blue	Passa il testo di colore blu	Esempio
w3-hover-text-yellow	Hover colore del testo di colore giallo	Esempio

Classe	Descrizione	Esempio
w3-hover-border- color	colore del bordo al passaggio del mouse	Esempio
w3-hover-opacity	Aggiunge la trasparenza ad un elemento al passaggio del mouse (opacità: 0,6)	Esempio
w3-hover-opacity-off	Rimuove la trasparenza da un elemento al passaggio del mouse (100% di opacità)	Esempio
w3-hover-shadow	Aggiunge un'ombra a un elemento su librazione	Esempio
w3-hover-grayscale	Aggiunge un (scala di grigi 100%) effetto bianco e nero ad un elemento	Esempio
w3-hover-sepia	Aggiunge un effetto seppia a un elemento su librazione	Esempio
w3-hover-none	Rimuove gli effetti al passaggio del mouse da un elemento	Esempio

Classe	Descrizione	Esempio
w3-round	Elemento arrotondato (border-radius) 4px	Esempio
w3-round-small	Elemento arrotondato (border-radius) 2px	Esempio
w3-round-medium	Elemento arrotondato (border-radius) 4px	Esempio
w3-round-large	Elemento arrotondato (border-radius) 8px	Esempio
w3-round-xlarge	Elemento arrotondato (border-radius) 16px	Esempio
w3-round-xxLarge	Elemento arrotondato (border-radius) 32px	Esempio

Classe	Descrizione	Esempio
w3-padding-small	Padding superiore 4px e inferiore, e 8px a destra ea sinistra.	Esempio
w3-padding	Padding superiore 8px e inferiore, e 16px a sinistra ea destra.	Esempio
w3-padding-large	Padding superiore e inferiore 12px, e 24px a sinistra ea destra.	Esempio
w3-padding-16	Padding superiore e inferiore 16px	Esempio
w3-padding-24	Padding superiore e inferiore 24px	Esempio
w3-padding-32	Padding superiore e inferiore 32px	Esempio
w3-padding-48	Padding superiore e inferiore 48px	Esempio
w3-padding-64	Padding superiore e inferiore 64px	Esempio

Classe	Descrizione	Esempio
w3-margin	Aggiunge un margine di 16 pixel di un elemento	Esempio
w3-margin-top	Aggiunge un margine superiore 16px ad un elemento	Esempio
w3-margin-right	Aggiunge un margine destra 16px ad un elemento	Esempio
w3-margin-bottom	Aggiunge un margine inferiore 16px ad un elemento	Esempio
w3-margin-left	Aggiunge un margine sinistro 16px ad un elemento	Esempio
w3-section	Aggiunge un alto 16px e margine inferiore di un elemento	Esempio

Classe	Descrizione	Esempio
w3-border	Borders (in alto, a destra, in basso, a sinistra)	Esempio
w3-border-top	bordo superiore	Esempio
w3-border-right	bordo destro	Esempio
w3-border-bottom	bordo inferiore	Esempio
w3-border-left	bordo sinistro	Esempio
w3-border-0	Rimuove tutte le frontiere	Esempio
w3-border- color	Consente di visualizzare tutti i confini definiti in un colore specifico (come il rosso, ecc)	Esempio
w3-bottombar	Aggiunge un bordo inferiore spesso (bar) ad un elemento	Esempio
w3-leftbar	Aggiunge un bordo spesso sinistra (bar) ad un elemento	Esempio
w3-rightbar	Aggiunge un bordo destro di spessore (bar) ad un elemento	Esempio
w3-topbar	Aggiunge un bordo superiore spessa (bar) ad un elemento	Esempio
w3-hover-border-color	colore del bordo Hoverable	Esempio