Grid utilities

Browse source code

Introduction

Alerts Avatars Buttons Colors Cards Charts Form components Tags Typography

Edit this page

Quickly and easily create layouts with the basic 12-column.

Work in progress! More detailed documentation is coming soon.

Basic layout

Create basic grid layout using columns. With .row and .col, we can easily manipulate the layout.

<div class="row mb-3">
  <div class="col-12"><div class="h-5 bg-gray-lighter rounded"></div></div>
</div>
<div class="row mb-3">
  <div class="col-6"><div class="h-5 bg-gray-lighter rounded"></div></div>
  <div class="col-6"><div class="h-5 bg-gray-lightest rounded"></div></div>
</div>
<div class="row mb-3">
  <div class="col-4"><div class="h-5 bg-gray-lighter rounded"></div></div>
  <div class="col-4"><div class="h-5 bg-gray-lightest rounded"></div></div>
  <div class="col-4"><div class="h-5 bg-gray-lighter rounded"></div></div>
</div>
<div class="row mb-3">
  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
</div>
<div class="row mb-3">
  <div class="col-2"><div class="h-5 bg-gray-lighter rounded"></div></div>
  <div class="col-2"><div class="h-5 bg-gray-lightest rounded"></div></div>
  <div class="col-2"><div class="h-5 bg-gray-lighter rounded"></div></div>
  <div class="col-2"><div class="h-5 bg-gray-lightest rounded"></div></div>
  <div class="col-2"><div class="h-5 bg-gray-lighter rounded"></div></div>
  <div class="col-2"><div class="h-5 bg-gray-lightest rounded"></div></div>
</div>

Column spacing

Row provides .gutters-[size] attribute to specify spacings between columns.

<div class="row gutters-0 mb-3">
  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
</div>
<div class="row gutters-xs mb-3">
  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
</div>
<div class="row gutters-sm mb-3">
  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
</div>
<div class="row gutters-md mb-3">
  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
</div>
<div class="row gutters-lg mb-3">
  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
</div>

Premium and Open Source dashboard template with responsive and high quality UI. For Free!