Understanding the Grid System

Bootstrap uses a 12-column responsive grid system. Columns are placed inside rows, which are placed inside containers.

Basic Grid Example

<div class="container">
  <div class="row">
    <div class="col-6">Half Width</div>
    <div class="col-6">Half Width</div>
  </div>
</div>

Auto Layout Columns

<div class="row">
  <div class="col">One</div>
  <div class="col">Two</div>
  <div class="col">Three</div>
</div>