Bootstrap adalah framework CSS yang sangat populer untuk membangun desain web modern yang responsif. Dengan koleksi komponen yang kaya, pengembang dapat dengan mudah membuat elemen web yang menarik dan fungsional. Berikut adalah 5 komponen Bootstrap yang wajib Anda ketahui:
1. Navbar
Navbar (navigasi bar) adalah komponen penting untuk menyediakan menu navigasi di website Anda. Dengan Bootstrap, Anda dapat membuat navbar yang responsif dengan mudah, lengkap dengan dropdown, logo, dan fitur pencarian. Misalnya, Anda dapat menggunakan kode berikut untuk membuat navbar sederhana:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
2. Grid System
Salah satu fitur andalan Bootstrap adalah Grid System yang membantu Anda membuat tata letak halaman yang fleksibel. Dengan 12 kolom dalam satu baris, Anda dapat mengatur konten sesuai kebutuhan. Contohnya:
<div class="container">
<div class="row">
<div class="col-md-6">Kolom 1</div>
<div class="col-md-6">Kolom 2</div>
</div>
</div>
3. Button
Tombol adalah elemen penting di setiap halaman web. Bootstrap menyediakan berbagai macam gaya tombol, dari warna hingga ukuran, dengan hanya menambahkan kelas seperti btn-primary atau btn-success. Contoh penggunaannya:
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
4. Modals
Modal adalah dialog atau pop-up yang digunakan untuk menampilkan informasi tambahan atau formulir tanpa meninggalkan halaman utama. Dengan Bootstrap, Anda dapat dengan mudah mengimplementasikan modal. Berikut adalah contoh modal:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch Modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Konten modal Anda.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
5. Cards
Komponen Card sangat serbaguna untuk menampilkan informasi seperti artikel, profil, atau produk. Anda bisa menyesuaikan card dengan gambar, teks, tombol, dan lainnya. Berikut contohnya:
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Deskripsi singkat yang menarik.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Lima komponen ini hanyalah awal dari apa yang bisa Anda lakukan dengan Bootstrap. Dengan memanfaatkan fitur-fitur ini, Anda dapat mempercepat pengembangan website sekaligus menjaga tampilannya tetap profesional dan modern.
Recent Post
api data exchange methods
02 April 2025
5 Komponen Bootstrap yang Wajib Diketahui
19 March 2025