با استفاده از بوت استرپ ، می توان صفحه را به سطرها و ستونهای دلخواهی تقسیم کرد. بوت استرپ یک روش جالب و قابل انعطاف برای این تقسیم بندی ارائه می کند. در بوت استرپ عرض هر سطر را 12 واحد در نظر می گیرند و این 12 واحد را به هر نسبتی می توان بین ستون ها تقسیم کرد.
روش شبکه بندی بوت استراپ صفحه را به 12 ستون تقسیم می کند. اگر تمایلی به استفاده از همه 12 ستون بصورت جداگانه نداشته باشید می توانید هر چندتا را با هم یک گروه در نظر گرفته و ستون ها عریض تری ایجاد کنید.
| S12 | S11 | S10 | S9 | S8 | S7 | S6 | S5 | S4 | S3 | S2 | S1 |
| Span4 | Span4 | Span4 | |||||||||
| Span6 | Span6 | ||||||||||
| Span12 | |||||||||||
سیستم شبکه بندی بوت استراپ واکنش پذیر است و ستونها بصورت خودکار بر اساس عرض صفحه نمایش چیده می شوند.
کلاس های شبکه بندی بوت استرپ
سیستم شبکه بندی از چهار نوع کلاس زیر استفاده می کند:
| کلاس | مورد کاربرد |
| xs | برای تلفن ها |
| sm | برای تبلت ها |
| md | برای رایانه های رومیزی |
| lg | برای رایانه های رومیزی بزرگتر |
کلاس های فوق می توانند بصورت ترکیبی برای ایجاد طرح های گویا و قابل انعطاف استفاده شوند:
<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-*-* مناسب ). دقت کنید که جمع اعداد در .col-*-* برای هر سطر باید همیشه حداکثر 12 باشد. در زیر چند مثال از طرح های گرید در بوت استرپ نشان داده شده است.
.col-sm-4
.col-sm-4
.col-sm-4
مثال زیر نشان می دهد که چگونه سه ستون با عرض مساوی مناسب برای تبلت ها ساخته می شوند، عرض این ستون ها در رایانه های رومیزی، کشیده شده و در تلفن ها هم سه ستون بصورت خودکار زیر هم قرار می گیرند.
<div class=”col-sm-4″>.col-sm-4</div>
<div class=”col-sm-4″>.col-sm-4</div>
<div class=”col-sm-4″>.col-sm-4</div>
</div>
مثال زیر هم دو ستون با عرض نامساوی را ایجاد می کند.
<div class=”col-sm-4″>.col-sm-4</div>
<div class=”col-sm-8″>.col-sm-8</div>
</div>