• Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
• Per un terzo: 4 colonne.
• Per un quarto: 3 colonne.
• Per un sesto: 2 colonne.
• Per un dodicesimo: una colonna.

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:

Specificare la larghezza delle colonne

Possiamo specificare la larghezza di una colonna usando la classe corrispondente:

Ad esempio:

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Produrrà questo risultato: