<div class="row">
  <div class="col-*-*"></div>
  <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>

در نمونه مثال بالا ابتدا یک row ایجاد میکنیم، سپس تعدادی ستون را اضافه میکنیم (ستون هایی که با  کلاس *-*-col. مشخص شده اند). دقت داشته باشید که مجموع اعداد در ستون هایی که با *-*-col. برای هر row مشخص میشوند باید برابر با عدد 12 باشد.

در زیر نمونه مثال هایی آورده شده است که میتوانید با استفاده از آنها سیستم گرید در بوت استرپ را به سادگی فرا بگیرید.

سه ستون با پهنایی برابر

در نمونه مثال زیر میتوان مشاهده نمود که چطور میتوان به ساختاری سه ستونی با پهنایی برابر رسید که از تبلت ها تا دسکتاپ های بزرگ مقیاس پذیر است و در تلفن های همراه یا صفحه نمایش هایی که پهنای آنها از 768 پیکسل کمتر باشد ستون ها به صورت خودکار در زیر هم قرار میگیرند : 

<div class="row">
  <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="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>