Bootstrap utilizza diverse classi CSS per la creazione delle colonne. In questo articolo spiegheremo come funzionano queste classi e come utilizzarle.
Bootstrap si basa su un sistema a 12 colonne, dove il numero 12 rappresenta il 100% della larghezza del contenitore. Quindi la somma delle
singole colonne (rappresentate dalle classi span1, span2 eccetera) dovrà sempre avere come totale 12.
Prendiamo questa marcatura d'esempio:
<div id="content">
<div id="main"></div>
<div id="content-sub"></div>
</div>
Supponiamo di volere la prima colonna larga il doppio della seconda. In Bootstrap avremo:
<div id="content" class="container row-fluid">
<div id="main" class="span8"></div>
<div id="content-sub" class="span4"></div>
</div>
8 + 4 = 12, ossia il 100% della larghezza secondo il calcolo di Bootstrap. Qualora volessimo le due colonne della stessa larghezza dovremmo semplicemente scrivere:
<div id="content" class="container row-fluid">
<div id="main" class="span6"></div>
<div id="content-sub" class="span6"></div>
</div>
6 + 6 = 12. Come si può notare una volta capito il meccanismo che regola la griglia di Bootstrap il suo utilizzo risulta davvero intuitivo.