Baikal | Create Beautiful Website

Grid

Utilize responsive grids to organize content effortlessly, ensuring a clean and adaptable layout for any screen size.

Bootstrap 5 grid system

For detail documentation, View Grid on Bootstrap⟶

<div class="row">
  <div class="col-12">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
</div>

<div class="row">
  <div class="col-6">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-6">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
</div>

<div class="row">
  <div class="col-4">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-4">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-4">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
</div>

<div class="row">
  <div class="col-3">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-3">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-3">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-3">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
</div>

<div class="row">
  <div class="col-2">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-2">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-2">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-2">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-2">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-2">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
</div>

<div class="row">
  <div class="col-1">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-1">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-1">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-1">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-1">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-1">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-1">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-1">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-1">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-1">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-1">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
  <div class="col-1">
    <div class="py-5 border border-dashed border-400 bg-100"></div>
  </div>
</div>