Raccolte qui troavate un primo gruppo di classi definite da Bootstrap, tra cui quelle utilizzate negli esercizi svolti durante la lezione 5.

Classi containers

Classe Descrizione
.container Contenitore a larghezza fissa. La larghezza è determinato dallo schermo del dispositivo. Uguale margine a sinistra e a destra.
.container-fluid Un contenitore che occupa l'intera larghezza dello schermo

Bootstrap Grid System

Classe Descrizione
.col-*-push-* Cambia l'ordine delle colonne nella griglia spostendo una colonna a destra di un certo numero di colonne. Da uasare insieme a  .col-*-pull-*. Il primo asterisco può essere sotituito da xs (dispositivi cellulari  < 768px), sm (tablet ≥768px), md (desktop ≥992px), lg (desktop  ≥1200px). Il secondo asterisco da un numero compreso tra 1 e 12.
.col-*-offset-* Offset di una colonna. Queste classi aumentano il margine sinistro di una colonna di un certo numero di colonne. Il primo asterisco può essere sotituito da xs (dispositivi cellulari  < 768px), sm (tablet ≥768px), md (desktop ≥992px), lg (desktop  ≥1200px). Il secondo asterisco da un numero compreso tra 1 e 12.
.col-*-* Griglia responsive. Il primo asterisco può essere sotituito da xs (dispositivi cellulari  < 768px), sm (tablet ≥768px), md (desktop ≥992px), lg (desktop  ≥1200px). Il secondo asterisco da un numero compreso tra 1 e 12.
.row Contenitore per le colonne responsive
.col-*-pull-* Cambia l'ordine delle colonne nella griglia spostendo una colonna a sinistra di un certo numero di colonne da usare insieme a .col-*-push-*​​​​​​​. Il primo asterisco può essere sotituito da xs (dispositivi cellulari  < 768px), sm (tablet ≥768px), md (desktop ≥992px), lg (desktop  ≥1200px). Il secondo asterisco da un numero compreso tra 1 e 12.

Classi per pulsanti e gruppi

Classe  Descrizione
.btn-group-justified Il gruppo di pulsanti si estende per tutta la larghezza del contenitore
.btn-group-sm Gruppo di pulsanti piccoli (rende tutti i pulsanti di un gruppo più piccoli)
.btn-group-vertical Gruppo di pulsanti impilati verticalmente
.btn-group-xs Gruppo di pulsanti extra-small (rende tutti i pulsanti in un gruppo extra-small)
.btn-group Raggruppa i pulsanti contenuti nell'elemento
.btn-group-lg Gruppo di pulsanti di grandi dimensioni (rende tutti i pulsanti in un gruppo grandi - maggiore dimensione del carattere e padding)
.btn-warning  Rappresenta allerta o un'azione negativa
.btn-xs Pulsante extra-small
.btn-block Crea un pulsante che occupa l'intera larghezza dell'elemento padre
.btn-danger Indica pericolo o un'azione negativa
.active Simula pulsante premuto
.btn Crea un pulsante (sfondo grigio e gli angoli arrotondati)
.disabled Disabilita un pulsante 
.btn-default Pulsante predefinito. Fondo bianco e bordo grigio
.btn-info Rappresenta le informazioni
.btn-lg Pulsante grande
.btn-link Rende un pulsante simile a un link 
.btn-primary Pulsante del colore primario.
.btn-sm Pulsante piccolo
.btn-success Indica successo o un'azione positiva

Classi di utilità

Classe Descrizione
.visible-print-inline Visualizza l'elemento ( display:inline ) in stampa
.clearfix Da attribuire ad un <div> o a un altro conteninore che contiene elementi flotanti (float:right o float:left)
.close Indica un'icona Chiudi
.bg-warning Aggiunge un colore di sfondo di tipo warning (per default arancio) a un elemento. Rappresenta un avviso o un'azione negativa
.invisible Rende un elemento invisibile ( visibility:hidden ). Nota: Anche se l'elemento è invisibile, occuperà spazio nella pagina
.pre-scrollable Rende un elemento<pre> scrollabile( max-height:350px e barra di scorrimento verticale)
.center-block Centra un qualsiasi elemento (imposta l'elemento come display:block con margin-right:auto e margin-left:auto )
.hidden Nasconde un elemento ( display:none )
.pull-left Spinge un elemento a sinsitra (float:left)
.hidden-xs, .hidden-sm, .hidden-md, .hidden-lg Nasconde un elemento a seconda delle dimensioni dello schermo
.hidden-print Nasconde l'elemento ( display:none ) in  stampa
.hide Obsoleta. Uso .hidden invece
.visible-print-block Visualizza l'elemento ( display:block ) in  stampa 
.pull-right Spinge un elemento a destra(float:right)
.show Elemento visibile (display:block)
.bg-success Aggiunge un colore di sfondo di tipo success (per default verde) a un elemento. Indica successo o un'azione positiva
.sr-only Nasconde un elemento su tutti i dispositivi tranne che per i lettori di schermo
.sr-only-focusable Nasconde un elemento su tutti i dispositivi tranne che per i lettori di schermo
.bg-primary Aggiunge un colore di sfondo di tipo primary (per default blu) a un elemento. Rappresenta qualcosa di importante
.bg-info Aggiunge un colore di sfondo di tipo info (per default azzurro) a un elemento. Rappresenta le informazioni
.bg-danger Aggiunge un colore di sfondo di tipo danger (per default rosso) a un elemento. Rappresenta pericolo, errore o un'azione negativa
.visible-* Sconsigliato a partire da v 3.2.0. Utilizzato per visualizzare e/o nascondere il contenuto dal dispositivo. Nota: Uso .hidden-* invece
.visible-print-inline-block Visualizza l'elemento ( display:inline-block ) in  stampa