Template Bootstrap dengan kombinasi warna Hijau, Biru, dan Abu-Abu yang elegan. Dilengkapi dengan dokumentasi lengkap dan komponen siap pakai.
<button class="btn btn-green-primary">Green Primary</button>
<button class="btn btn-blue-primary">Blue Primary</button>
<button class="btn btn-outline-green">Outline Green</button>
Monitor your business performance with real-time analytics.
Work together seamlessly with your team members.
Secure and scalable cloud storage solutions.
<div class="card card-hover shadow-sm">
<div class="card-body">
<i class="fas fa-chart-line fa-3x text-green-primary"></i>
<h5 class="card-title">Title</h5>
<p class="card-text">Content</p>
</div>
</div>
<input type="text" class="form-control" placeholder="Input">
<select class="form-select"><option>Select</option></select>
<textarea class="form-control" rows="3"></textarea>
<div class="form-check"><input class="form-check-input" type="checkbox"></div>
<div class="alert alert-success">Success message</div>
<div class="alert alert-info">Info message</div>
<div class="alert alert-warning">Warning message</div>
<div class="alert alert-danger">Error message</div>
<button data-bs-toggle="modal" data-bs-target="#modalId">Launch Modal</button>
<div class="modal fade" id="modalId">...</div>
| # | Nama | Status | Aksi | |
|---|---|---|---|---|
| 1 | John Doe | john@example.com | Active | |
| 2 | Jane Smith | jane@example.com | Pending |
<table class="table table-hover">
<thead class="table-light">...</thead>
<tbody>...</tbody>
</table>
Cara menggunakan template ini:
1. Copy seluruh kode HTML ke file index.html
2. Pastikan terhubung ke internet untuk CDN Bootstrap & FontAwesome
3. Sesuaikan konten sesuai kebutuhan Anda
4. Ganti warna melalui variable CSS di bagian :root
Ubah warna dengan memodifikasi variable CSS:
:root {
--green-primary: #10b981;
--blue-primary: #3b82f6;
--gray-50: #f9fafb;
...
}
Class tambahan yang tersedia:
.btn-green-primary - Tombol hijau.btn-blue-primary - Tombol biru.card-hover - Efek hover pada card.text-green-primary - Teks warna hijau.bg-blue-primary - Background biruTemplate fully responsive menggunakan Bootstrap 5 grid system:
<div class="row">
<div class="col-md-6 col-lg-4">...</div>
</div>
Hubungi tim kami untuk konsultasi lebih lanjut tentang penggunaan template ini.