Sono disponibili classi di posizionamento rapido, anche se non responsivi.
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
Il sistema di griglia di Bootstrap utilizza una serie di contenitori, righe e colonne per il layout e allineamento del contenuto.
E' un sistema a dodici colonne e cinque livelli responsive predefiniti
È costruito con flexbox ed è completamente reattivo.
Di seguito sono riportati vari esempi su come funziona la griglia.
- I contenitori forniscono un mezzo per centrare e orizzontalmente il contenuto della pagina.
Utilizzare .container per una larghezza in pixel reattiva o .container-fluid per una larghezza width: 100%.
- Le righe sono involucri per colonne.
Ogni colonna ha padding orizzontale per controllare lo spazio tra di loro.
Questo padding viene poi neutralizzato sulle righe con margini negativi.
In questo modo, tutto il contenuto delle colonne è visivamente allineato sul lato sinistro.
- In un layout a griglia, il contenuto deve essere inserito all'interno di colonne e solo le colonne possono essere figlie immediate delle righe.
- Grazie al flexbox, le colonne della griglia senza una specifica larghezza .width verranno automaticamente disposte come colonne di uguale larghezza.
Ad esempio, ciascuna di quattro istanze .col-sm sarà automaticamente larga il 25% del totale.
- Le classi di colonne indicano il numero di colonne che si desidera utilizzare tra i 12 possibili per riga.
Quindi, se si vuole usare tre colonne di uguale larghezza, si usa .col-4.
- La larghezza delle colonne .width sono sempre impostate in percentuale, quindi sono sempre fluide e dimensionate rispetto al loro elemento genitore.
- Le colonne hanno un padding orizzontale per creare i margini interni tra singole colonne,
tuttavia, è possibile rimuoverlo con .no-gutters nella riga .row
- Per rendere la griglia reattiva, ci sono cinque punti di interruzione della griglia, uno per ciascun punto di interruzione reattivo:
(extra small), small, medium, large e extra large.
| Punto di rottura | Nome corto | Descrizione | Media query | Esempi di classi di colonne |
|---|---|---|---|---|
| 1. Extra Small (predefinito) | (Vuoto) | Dispositivi molto piccoli (telefoni verticali, meno di 576 px) | Nessuna query multimediale poiché questa è l'impostazione predefinita in Bootstrap |
.col-(1-12)
|
| 2. Piccolo |
sm
|
Piccoli dispositivi (telefoni orizzontali, 576px e superiori) |
@media (min-width: 576px) {}
|
.col-sm-(1-12)
|
| 3. Medio |
md
|
Dispositivi medi (tablet, 768 px e oltre) |
su:
@media (min-width: 768px) {}
giù: @media (max-width: 767px) {}
|
.col-md-(1-12)
|
| 4. Grande |
lg
|
Grandi dispositivi (desktop, 992px e superiori) |
@media (min-width: 992px) {}
|
.col-lg-(1-12)
|
| 5. Extra Large |
xl
|
Dispositivi molto grandi (desktop di grandi dimensioni, da 1200 px in su) |
@media (min-width: 1200px) {}
|
.col-xl-(1-12)
|
Grazie al Flexbox si può utilizzare un qualsiasi numero (da uno a dodici) di elementi .col all'interno di un elemento .row e ogni colonna verrà automaticamente creata con la stessa larghezza.
<div class="grigliaDemo">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
1 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
</div>
</div>
Si può anche impostare una larghezza colonna e Flexbox ridimensiona automaticamente tutte le altre colonne attorno ad essa.
<div class="grigliaDemo">
<div class="row">
<div class="col">
1 of 3 (col)
</div>
<div class="col-6">
2 of 3 (col-6)
</div>
<div class="col">
3 of 3 (col)
</div>
</div>
<div class="row">
<div class="col">
1 of 3 (col)
</div>
<div class="col-5">
2 of 3 (col-5)
</div>
<div class="col">
3 of 3 (col)
</div>
</div>
</div>
Utilizzando le col-{breakpoint}-autoclassi è possibile impostare colonne a larghezza fissa su un punto di interruzione e quindi reimpostarle alla loro larghezza di natura su un altro punto di interruzione.
<div class="grigliaDemo">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-12 col-md-auto">
Contenuto a larghezza variabile
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-12 col-md-auto">
Contenuto a larghezza variabile
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Crea colonne di uguale larghezza che si estendono su più righe inserendo un punto .w-100
in cui si desidera che le colonne si spezzino in una nuova riga.
<div class="grigliaDemo">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
Per i layout di griglia che sono gli stessi dal più piccolo dei dispositivi al più grande, usare le classi .col e .col-*.
<div class="grigliaDemo">
<div class="row mb-3">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row mb-3">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col-6">col-6</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Utilizzando un singolo set di classi .col-sm-*, è possibile creare un sistema di base che inizia accatastato su dispositivi di dimensioni ridotte prima di diventare orizzontale su dispositivi desktop (medi).
<div class="grigliaDemo">
<div class="row mb-3">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Combinazioni di classi .col-breakpoint-* sulle stesse colonne per creare layout diversi rispetto ai breakpoint.
NOTA: la notazione {breakpoint} o breakpoint o BREAKPOINT rappresenta dei segna posti per:
sm md lg xl
<div class="grigliaDemo">
<!-- Impila le colonne sul cellulare creando una larghezza intera e l'altra a metà larghezza -->
<div class="row mb-3">
<div class="col col-md-8">.col .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- 3 colonne uguali sul cellulare, 1 ampia e 2 piccole da media su-->
<div class="row mb-3">
<div class="col col-md-8">.col-6 .col-md-8</div>
<div class="col col-md-2">.col-6 .col-md-2</div>
<div class="col col-md-2">.col-6 .col-md-2</div>
</div>
<!-- Le colonne sono sempre ampie del 50%, su dispositivi mobili e desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Le seguenti classi applicate a qualsiasi elemento riga .row consentono di controllare l'allineamento verticale delle colonne in una griglia.
1) .align-items-start e align-items-BREAKPOINT-start:
allinea le colonne verso l'alto ("start").
2) .align-items-end e align-items-BREAKPOINT-end:
allinea le colonne al fondo ("fine").
3) .align-items-center e align-items-BREAKPOINT-center:
allinea le colonne al centro ("centro").
4) .align-items-stretch e align-items-BREAKPOINT-stretch:
allunga la colonna fino alla piena altezza del loro contenitore di riga.
5) .align-self-start|end|center|stretch e .align-self-BREAKPOINT-start|end|center|stretch
Si possono anche allineare singole colonne usando le classi direttamente sugli elementi della colonna.
<div class="grigliaDemo">
<div class="row align-items-start bg-light mb-3" style="height: 10rem;">
<div class="col">
Align top
</div>
<div class="col">
Align top
</div>
</div>
<div class="row align-items-center bg-light mb-3" style="height: 10rem;">
<div class="col">
Align center
</div>
<div class="col">
Align center
</div>
</div>
<div class="row align-items-end bg-light mb-3" style="height: 10rem;">
<div class="col">
Align bottom
</div>
<div class="col">
Align bottom
</div>
</div>
<div class="row align-items-stretch bg-light mb-3" style="height: 10rem;">
<div class="col">
Stretch full height
</div>
<div class="col">
Stretch full height
</div>
</div>
<div class="row bg-light mb-3" style="height: 10rem;">
<div class="col align-self-start">
Single column top
</div>
<div class="col align-self-center">
Single column middle
</div>
<div class="col align-self-end">
Single column bottom
</div>
</div>
</div>
Le seguenti classi applicate a qualsiasi elemento riga .row consentono di controllare l'allineamento orizzontale delle colonne in una griglia.
1) .justify-content-start e justify-content-BREAKPOINT-start:
allinea le colonne a sinistra ("start").
2) .justify-content-end e justify-content-BREAKPOINT-end:
allinea le colonne a destra ("fine").
3) .justify-content-center e justify-content-BREAKPOINT-center:
allinea le colonne al centro ("centro").
4) .justify-content-around e justify-content-BREAKPOINT-around:
centra colonne e le distribuisce in modo uniforme.
5) .justify-content-between e justify-content-BREAKPOINT-between:
allunga le colonne per l'intera larghezza del loro contenitore riga e li distribuisce in modo uniforme.
<div class="grigliaDemo">
<div class="row justify-content-start bg-light mb-3">
<div class="col-4">
Align left
</div>
<div class="col-4">
Align left
</div>
</div>
<div class="row justify-content-center bg-light mb-3">
<div class="col-4">
Align center
</div>
<div class="col-4">
Align center
</div>
</div>
<div class="row justify-content-end bg-light mb-3">
<div class="col-4">
Align right
</div>
<div class="col-4">
Align right
</div>
</div>
<div class="row justify-content-around bg-light mb-3">
<div class="col-4">
Align even center
</div>
<div class="col-4">
Align even center
</div>
</div>
<div class="row justify-content-between bg-light mb-3">
<div class="col-4">
Align even stretch
</div>
<div class="col-4">
Align even stretch
</div>
</div>
</div>
Per impostazione predefinita tra le colonne non esiste uno spazio.
per aggiungere uno spazio tra le colonne, aggiungere un <div>...</div> nella colonna del contenuto
poi per rimuovere lo spazio aggiungere la classe .no-gutters agli elementi .row.
<div class="container">
<div class="row mb-3">
<div class="col">
<div class="bg-warning p-2">con spaziatura</div>
</div>
<div class="col">
<div class="bg-warning p-2">con spaziatura</div>
</div>
</div>
<div class="row no-gutters">
<div class="col">
<div class="bg-warning p-2">senza spaziatura</div>
</div>
<div class="col">
<div class="bg-warning p-2">senza spaziatura</div>
</div>
</div>
</div>
Con Flexbox si possono riordinare le colonne senza riscrivere il codice, ma usando queste classi: .order-(1-12)
L'ordine del numero minore viene sempre messo prima del numero maggiore, indipendentemente dalla posizione reale
Funziona anche con le classi reattive: .order-BREAKPOINT-(1-12) e cambiare l'ordine per il punto di interruzione.
<div class="grigliaDemo">
<div class="row">
<div class="col">
Primo, non riordinato
</div>
<div class="col order-12">
Secondo, riordinato all'ultimo
</div>
<div class="col order-2">
Terzo, riordinato prima del secondo
</div>
</div>
</div>
Sposta le colonne usando le classi .m(r|l)-auto per forzare le colonne di pari livello l'una lontano dall'altra.
<div class="grigliaDemo">
<div class="row bg-light mb-3">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row bg-light mb-3">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row bg-light mb-3">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Sposta le colonne a destra usando le classi .offset-md-*
Queste classi aumentano il margine sinistro del numero di colonne indicate nell' offset
.
Ad esempio, se si indica un .offset-md-4 viene spostato di .col-md-4 ovvero quattro colonne.
<div class="grigliaDemo">
<div class="row bg-light mb-3">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row bg-light mb-3">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row bg-light mb-3">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
Per annidare il contenuto della griglia predefinita, aggiungire una nuova riga .row insieme una nuova colonna .col-sm-*
all'interno di una colonna .col-sm-* esistente.
Le righe annidate possono includere fino a un set di 12 colonne.
<div class="grigliaDemo">
<!-- level 1 -->
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<!-- level 2 -->
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
<!-- level 3 -->
<div class="row">
<div class="col-6">
Level 3: .col-6
</div>
<div class="col-6">
Level 3: .col-6
</div>
</div>
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>