Bootstrap prevede un grid layout dove ogni riga può essere suddivisa in un massimo di 12 colonne. Quando creiamo una colonna, dobbiamo decidere quante colonne questa occupa tramite una classe css. Per fare un esempio, se diamo a una colonna la classe col-lg-12, questa occuperà tutta la riga, mentre, se le diamo col-lg-6, questa occuperà solo metà della riga. Questa funzionalità consente di impaginare i contenuti delle nostre applicazioni in modo semplice ed efficace, ma presenta alcuni limiti.

Se vogliamo fare 5 colonne di larghezza uguale che occupano tutta la riga, questo non è possibile.
Bootstrap 4 introduce le classi con larghezza automatica calcolata in base al numero di colonne presenti.

Prendiamo come esempio il seguente codice.

<div class="container">
  <div class="row">
    <div class="col-lg">
      One of three columns
    </div>
    <div class="col-lg">
      One of three columns
    </div>
    <div class="col-lg">
      One of three columns
    </div>
    <div class="col-lg">
      One of three columns
    </div>
    <div class="col-lg">
      One of three columns
    </div>
  </div>
</div>

In questo esempio, abbiamo deciso che una riga contiene 5 colonne di a cui non abbiamo impostato il numero di colonne che utilizzano. In questo caso, bootstrap assegna a ogni colonna la dimensione necessaria per renderla uguale alle altre: 20%.