CSS: capire ed usare la griglia delle colonne di Bootstrap

Short link

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.