Komponen
Buttons
<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline">Outline</button>Cards
Header
Body content
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Body</div>
</div>Modal
<button data-modal-open="#my-modal">Buka</button>
<div class="modal" id="my-modal" data-modal>
<div class="modal-backdrop"></div>
<div class="modal-dialog">...</div>
</div>Dropdown
<div class="dropdown">
<a href="#" data-dropdown>Menu</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item</a>
</div>
</div>Alerts
Contoh alert
<div class="alert alert-primary">Alert message</div>Badges
Netral
Primary
Success
<span class="badge badge-primary">Primary</span>Forms
<input class="form-control" placeholder="Email"/>Table
| Nama | Status |
|---|---|
| Alpha | Aktif |
<div class="table-responsive">
<table class="table">...</table>
</div>Progress
<div class="progress">
<div class="progress-bar" style="width:50%"></div>
</div>Tabs
Panel A
Panel B
<div data-tabs>
<div class="tabs">
<button class="tab" data-tab="a">A</button>
</div>
<div class="tab-panel" data-tab-panel="a">Panel A</div>
</div>Accordion
Bagian 1
Konten 1
Bagian 2
Konten 2
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">Header</div>
<div class="accordion-body">Body</div>
</div>
</div>Toast
ferzui.toast('Pesan', {type: 'info', duration: 3000})Tooltip
<button data-tooltip="Tooltip text" data-tooltip-pos="top">Hover</button>Offcanvas
Offcanvas
Konten offcanvas
<button data-offcanvas-open="#my-offcanvas">Buka</button>
<div class="offcanvas" id="my-offcanvas">
<div class="offcanvas-backdrop" data-offcanvas-close></div>
<div class="offcanvas-panel">...</div>
</div>Pagination
<nav class="pagination">
<a class="page-link active" href="#">1</a>
</nav>Breadcrumb
<nav class="breadcrumb">
<a href="#">Home</a>/
<span>Current</span>
</nav>Steps
Mulai
Proses
Selesai
<div class="steps">
<div class="step active">Step 1</div>
<div class="step">Step 2</div>
</div>Segmented Control
<div class="segmented">...</div>Drawer
Isi drawer
<div class="drawer" id="drawer-demo">...</div>Toggle Switch
<label class="toggle"><input type="checkbox"/><span class="toggle-slider"></span></label>Rating
<div class="rating">★★★★★</div>Stepper
1
2
3
<div class="stepper">...</div>Sortable Table
| Nama | Nilai |
|---|---|
| Charlie | 75 |
| Bravo | 90 |
| Alpha | 80 |
<table class="table table-sortable">...</table>Collapsible Sidebar
Konten utama
<aside class="sidebar-collapsible" id="side-demo">...</aside>