Bootstrap грид системата предоставя на ползване 12 колони. Ако не искаме да ползваме всичките можем да групираме някои за да имаме по-широки колони.
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
Bootstrap грида е риспонсив колоните могат да се реаранжират автоматично в зависимост от размера на екрана.
Класове
- xs (за телефони)
- sm (за таблети)
- md (за десктоп)
- lg (за големи десктопи)
Всички тези класове може да се комбинират за създаването на динамични и гъвкави структури.
Основна структура на Bootstrap грида
Следващия код е примерен:
<div class=„row“>
<div class=„col-*-*“></div>
</div>
<div class=„row“>
<div class=„col-*-*“></div>
<div class=„col-*-*“></div>
<div class=„col-*-*“></div>
</div>
<div class=„row“>
…
</div>
Първо: създаваме „ред“ – <div class=“row“>. След това добавяме броя колони, който искаме.
За да създадем три еднакви колони
.col-sm-4
.col-sm-4
.col-sm-4
За да създадем две разнородни колони
.col-sm-4
.col-sm-8
Ще разгледаме подробно грида в друг урок