mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 09:54:24 +04:00
77 lines
3.0 KiB
HTML
77 lines
3.0 KiB
HTML
---
|
|
title: Grid
|
|
page-title: Grid
|
|
done: true
|
|
---
|
|
|
|
<h5 class="mb-3">Stacked-to-horizontal</h5>
|
|
<div class="row">
|
|
<div class="col-md-2"><div class="card p-3">.col-md-2</div></div>
|
|
<div class="col-md-2"><div class="card p-3">.col-md-2</div></div>
|
|
<div class="col-md-2"><div class="card p-3">.col-md-2</div></div>
|
|
<div class="col-md-2"><div class="card p-3">.col-md-2</div></div>
|
|
<div class="col-md-2"><div class="card p-3">.col-md-2</div></div>
|
|
<div class="col-md-2"><div class="card p-3">.col-md-2</div></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-8"><div class="card p-3">.col-md-8</div></div>
|
|
<div class="col-md-4"><div class="card p-3">.col-md-4</div></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4"><div class="card p-3">.col-md-4</div></div>
|
|
<div class="col-md-4"><div class="card p-3">.col-md-4</div></div>
|
|
<div class="col-md-4"><div class="card p-3">.col-md-4</div></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6"><div class="card p-3">.col-md-6</div></div>
|
|
<div class="col-md-6"><div class="card p-3">.col-md-6</div></div>
|
|
</div>
|
|
|
|
<h5 class="my-3">Mobile and desktop</h5>
|
|
<div class="row">
|
|
<div class="col-12 col-md-8"><div class="card p-3">.col-12 .col-md-8</div></div>
|
|
<div class="col-6 col-md-4"><div class="card p-3">.col-6 .col-md-4</div></div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-6 col-md-4"><div class="card p-3">.col-6 .col-md-4</div></div>
|
|
<div class="col-6 col-md-4"><div class="card p-3">.col-6 .col-md-4</div></div>
|
|
<div class="col-6 col-md-4"><div class="card p-3">.col-6 .col-md-4</div></div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-6"><div class="card p-3">.col-6</div></div>
|
|
<div class="col-6"><div class="card p-3">.col-6</div></div>
|
|
</div>
|
|
|
|
<h5 class="my-3">Mobile, tablet, desktops</h5>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6 col-md-8"><div class="card p-3">.col-12 .col-sm-6 .col-md-8</div></div>
|
|
<div class="col-6 col-md-4"><div class="card p-3">.col-6 .col-md-4</div></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-6 col-sm-4"><div class="card p-3">.col-6 .col-sm-4</div></div>
|
|
<div class="col-6 col-sm-4"><div class="card p-3">.col-6 .col-sm-4</div></div>
|
|
<div class="clearfix visible-xs-block"></div>
|
|
<div class="col-6 col-sm-4"><div class="card p-3">.col-6 .col-sm-4</div></div>
|
|
</div>
|
|
|
|
<h5 class="my-3">Offsetting columns</h5>
|
|
<div class="row">
|
|
<div class="col-md-4"><div class="card p-3">.col-md-4</div></div>
|
|
<div class="col-md-4 ml-auto"><div class="card p-3">.col-md-4 .ml-auto</div></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3 ml-auto"><div class="card p-3">.col-md-3 .ml-auto</div></div>
|
|
<div class="col-md-3 ml-auto"><div class="card p-3">.col-md-3 .ml-auto</div></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 ml-auto"><div class="card p-3">.col-md-6 .ml-auto</div></div>
|
|
</div>
|
|
|
|
<h5 class="my-3">Column ordering</h5>
|
|
<div class="row">
|
|
<div class="col-md-9 order-md-2"><div class="card p-3">.col-md-9 .order-md-2</div></div>
|
|
<div class="col-md-3 order-md-1"><div class="card p-3">.col-md-3 .order-md-1</div></div>
|
|
</div>
|