ذر بوت‌ استرپ، کلاس‌های col-lg ، col-md و col-sm برای طراحی (responsive) استفاده می شوند. هرکدام برای اندازه‌های مختلف صفحه نمایش تعریف شده اند. این کلاس‌ها  این امکان رو میدهند که طراحی وب‌ سایت رو برای اندازه‌ های مختلف صفحه نمایش بهینه کنید.

کلاس های شبکه بندی

سیستم شبکه بندی بوت استرپ از 5 کلاس به شرح زیر تشکیل می شود :

• .col- ( دستگاه های بسیار کوچک – صفحات نمایشگر کوچکتر از 576px )
• .col-sm- ( دستگاه های کوچک – صفحات نمایشگر بزرگتر یا برابر با 576px )
• .col-md- ( دستگاه های متوسط – صفحات نمایشگر بزرگتر یا برابر با 768px )
• .col-lg- ( دستگاه های بزرگ – صفحات نمایشگر بزرگتر یا برابر با 992px )
• .col-xl- ( دستگاه های خیلی بزرگ – صفحات نمایشگر بزرگتر یا برابر با 1200px )

کلاسهای بالا را می توان ترکیب کرد تا پوسته های پویاتر و انعطاف پذیرتری ایجاد شود.

نکته: هر کلاس افزایش می یابد ، بنابراین اگر می خواهید عرضهای یکسان را برای sm و md تنظیم کنید ، فقط باید sm را مشخص کنید.

قوانین شبکه بندی

برخی از قوانین شبکه بندی در بوت استرپ 4 را بررسی می کنیم :

• ردیف ها باید در یک .container (عرض ثابت) یا .container-fluid (تمام عرض) قرار بگیرند تا تراز و چیدمان مناسب انجام شود.
• برای ایجاد گروه های افقی از ستون ها از کلاس .rows استفاده کنید.
• محتوا باید در داخل ستون ها قرار گیرد و فقط ستون ها ممکن است به ترتیب سطرهای کوچک باشند.
• کلاسهای از پیش تعریف شده مانند .row و .col-sm-4 برای ایجاد سریع طرح بندی شبکه در دسترس هستند..
• ستون های شبکه با تعیین تعداد 12 ستون موجود که می خواهید بین آنها ایجاد شود ایجاد می شوند. به عنوان مثال ، سه ستون مساوی از سه .col-sm-4 استفاده می کنند.
• عرض ستونها برحسب درصد است ، بنابراین نسبت به عنصر اصلی خود همیشه سیال و اندازه هستند.
• بزرگترین تفاوت بین بوت استرپ 3 و بوت استرپ 4 این است که در بوت استرپ 4 به جای float از flexbox استفاده می شود. یک مزیت بزرگ استفاده کردن از flexbox این است که ستون های شبکه بدون عرض مشخص به طور خودکار به عنوان “ستون های با عرض یکسان” (و ارتفاع مساوی) طرح بندی می شوند. مثال: سه عنصر با .col-sm هر کدام به طور خودکار 33.33٪ عرض از نقطه شکست کوچک به بالا خواهند داشت.

طرح پایه شبکه بندی

قطعه کد زیر یک طرح پایه از شبکه بندی در بوت استرپ 4 است ، برای درک بهتر تمام قوانین و موارد ذکر شده به ساختار کد توجه کنید :

<!-عرض ستون و نحوه نمایش آنها در دستگاه های مختلف را کنترل کنید->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-یا اجازه دهید Bootstrap به طور خودکار طرح را مدیریت کند->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div> 

مثال اول : یک ردیف با کلاس .row بسازید . سپس ، تعداد ستون های مورد نظر را اضافه کنید (برچسب ها با کلاس های .col-*-* مناسب).ستاره اول (*) نشان دهنده سایز مناسب دستگاه ریسپانسیو است: sm ، md ، lg یا xl ، در حالی که ستاره دوم یک عدد را نشان می دهد ، مجموع اعداد ستون باید 12 باشد .

مثلا شما قصد دارید از 3 ردیف برای دستگاه های متوسط استفاده کنید. باید از سه کلاس .com-md-4 استفاده کنید.

مثال دوم: به جای افزودن یک عدد به هر ستون ، اجازه دهید بوت استرپ طرح را مدیریت کند ، تا ستونهایی با عرض یکسان ایجاد شود: دو عنصر “col” = 50٪ عرض به هر ستون. سه ستون = 33.33 width عرض به هر ستون. چهار ستون = 25٪ عرض و غیره. همچنین می توانید از .col-sm | md | lg | xl برای ریپانسیو کردن ستون ها استفاده کنید.