برای ساخت و ساز قسمت سه ستونی سرویس ها، از سیستم طراحی اپلیکیشن در مشهد ریسپانسیو grid بوتاسترپ 4 متشکل از سطرها و ردیفهایی که شیت را تقسیم مینمایند به کارگیری فرمایید. به صورت پیشفرض، هر سطر دارنده 12 ردیف میباشد (با این اکنون، این آیتم را میتوانید در پیکربندی Sass تغییر تحول دهید). می توانید تعداد ردیفهایی که می خواهید در اسم کلاس column به کارگیری فرمایید را معین فرمائید. از جمله col-4 از دربین 12 ردیف 4 ردیف را میگیرد.
بوتاسترپ 4 پنج عدد breakpoints (نقاط ناکامی) ریسپانسیو داراست که پنج grid را تعریف و تمجید مینماید: خیلی خرد (پیشفرض)، خرد، میانگین، گران قدر، و خیلی بلندمرتبه. از آنجا که breakpointها مطابق مدیا کوئریها با کمترین پهنا میباشند، کلاسهای column برای خویش grid و کلیه گریدهای فوق ایفا می شوند.
برای مثال، در کد ذیل، col-md-4 برای گریدهای میانگین، تبارک، و خیلی گران قدر انجام می گردد. این بدان معناست که تبلتها و دسکتاپها قسمت سرویس ها را در سه ردیف متساوی در کنار یکدیگر اکران می دهند. و تلفنهای هوشمند با کاغذ اکران خرد و خیلی خرد، آنها را در تحت یکدیگر نماد میدهند (یک ردیف در هر ستون).