Modern UI Kit

Template Bootstrap dengan kombinasi warna Merah, Biru, dan Abu-Abu yang elegan. Dilengkapi dengan slider image, modal gallery, dan dokumentasi lengkap.

Lihat Komponen Lihat Gallery
Komponen

Button Components

Button Variants
Button Sizes
Icon Buttons
<button class="btn btn-red-primary">Red Primary</button>
<button class="btn btn-blue-primary">Blue Primary</button>
<button class="btn btn-outline-red">Outline Red</button>

Card Components

Analytics

Monitor your business performance with real-time analytics.

Team Collaboration

Work together seamlessly with your team members.

Cloud Storage

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-red-primary"></i>
    <h5 class="card-title">Title</h5>
    <p class="card-text">Content</p>
  </div>
</div>

Form Components

<input type="text" class="form-control" placeholder="Input">
<select class="form-select"><option>Select</option></select>
<textarea class="form-control" rows="3"></textarea>

Alert Components

<div class="alert alert-success">Success message</div>
<div class="alert alert-info">Info message</div>

Modal Components

<button data-bs-toggle="modal" data-bs-target="#modalId">Launch Modal</button>

Table Components

# Nama Email Status Aksi
1 John Doe john@example.com Active
2 Jane Smith jane@example.com Pending

Dokumentasi Penggunaan

Instalasi

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

Kustomisasi Warna

Ubah warna dengan memodifikasi variable CSS:

:root {
  --red-primary: #dc2626;
  --blue-primary: #3b82f6;
  --gray-50: #f9fafb;
  ...
}

Komponen Kustom

Class tambahan yang tersedia:

  • .btn-red-primary - Tombol merah
  • .btn-blue-primary - Tombol biru
  • .card-hover - Efek hover pada card
  • .text-red-primary - Teks warna merah
  • .gallery-img - Efek hover gallery

Slider & Gallery

Cara menggunakan komponen slider dan gallery:

<div id="heroCarousel" class="carousel slide">
  <div class="carousel-inner">...</div>
</div>
<img class="gallery-img" data-bs-toggle="modal">