Tutorial Bootstrap #10: Menampilkan Konten Terstruktur dengan Card Bootstrap (Pengganti Panel)
Di versi Bootstrap sebelumnya (terutama Bootstrap 3), komponen “Panel” digunakan untuk membungkus dan menampilkan konten terkait dalam sebuah kotak dengan border dan beberapa opsi styling. Namun, di Bootstrap 4 dan seterusnya, komponen Panel telah digantikan oleh komponen yang lebih fleksibel dan kaya fitur, yaitu Card. Dalam tutorial ini, kita akan membahas cara menggunakan komponen […]
Tutorial Bootstrap #9: Menampilkan Daftar dengan List Bootstrap
Daftar adalah cara yang umum dan efektif untuk menyajikan informasi secara terstruktur. Bootstrap menyediakan beberapa gaya untuk daftar, baik yang tidak berurutan (unordered) maupun berurutan (ordered), serta daftar yang tidak memiliki penanda (unstyled) dan daftar deskripsi. Mari kita pelajari cara menggunakannya dalam proyek web Anda di Malang, Jawa Timur. Daftar Tidak Berurutan (Unordered […]
Tutorial Bootstrap #8: Navigasi dengan Pagination & Breadcrumb di Bootstrap
Navigasi yang jelas dan intuitif adalah kunci penting dalam pengalaman pengguna yang baik. Bootstrap menyediakan dua komponen yang sangat berguna untuk navigasi: Pagination (penomoran halaman) untuk memecah konten yang panjang menjadi beberapa halaman, dan Breadcrumb (remah roti) untuk membantu pengguna memahami lokasi mereka di dalam struktur situs. Mari kita bahas cara menggunakannya dalam […]
Tutorial Bootstrap #7: Mengenal dan Menggunakan Ikon di Bootstrap
Ikon memainkan peran penting dalam antarmuka pengguna modern. Mereka membantu menyampaikan makna secara visual, meningkatkan estetika, dan membuat aplikasi web lebih intuitif. Meskipun Bootstrap sendiri tidak menyediakan set ikon bawaan, ekosistemnya sangat mendukung integrasi berbagai pustaka ikon populer. Dalam tutorial ini, kita akan membahas cara menggunakan beberapa pustaka ikon yang umum dipadukan dengan Bootstrap, […]
Tutorial Bootstrap #6: Notifikasi Alert Bootstrap
Alert adalah komponen penting untuk menampilkan pesan kepada pengguna, seperti informasi keberhasilan, peringatan, atau kesalahan. Bootstrap menyediakan komponen Alert yang mudah digunakan dan memiliki berbagai pilihan gaya. Dasar Penggunaan Alert Untuk membuat notifikasi Alert dasar, Anda perlu menambahkan class .alert pada elemen <div>, diikuti dengan class kontekstual untuk menentukan warnanya. Kelas Kontekstual […]
Tutorial Bootstrap #5: Jumbotron Bootstrap
Dulu, Jumbotron adalah salah satu komponen ikonik di Bootstrap yang digunakan untuk membuat blok konten besar sebagai sorotan utama di halaman web—seringkali di bagian atas (hero section). Namun, ada perubahan besar yang perlu Anda ketahui. Perubahan Penting di Bootstrap 5: Jumbotron Dihapus! Ya, Anda tidak salah baca. Mulai dari Bootstrap 5, […]
Tutorial Bootstrap #4: Membuat Link & Tombol Dengan Bootstrap
Tombol dan link adalah elemen interaktif paling fundamental dalam sebuah website. Bootstrap mengubah tampilan standar elemen ini menjadi tombol modern yang menarik dan konsisten di berbagai browser. Dengan utility class yang disediakan, kustomisasi tombol menjadi sangat mudah dan cepat. Kelas Tombol Dasar Untuk membuat tombol di Bootstrap, Anda perlu menambahkan class dasar […]
Tutorial Bootstrap #3: Menampilkan Gambar Dengan Bootstrap
Bekerja dengan gambar adalah bagian penting dalam pengembangan web. Bootstrap menyediakan serangkaian class yang memudahkan kita untuk menampilkan gambar secara responsif dan memberikan gaya dengan cepat. Dalam tutorial kali ini, kita akan membahas cara-cara menampilkan dan memanipulasi gambar menggunakan Bootstrap. Gambar Responsif Salah satu fitur terpenting Bootstrap adalah kemampuannya untuk membuat […]
Tutorial Foundation #5: Mengelola Tampilan Elemen dengan Visibility Classes Foundation
Dalam pengembangan web responsif, seringkali kita perlu menampilkan atau menyembunyikan elemen tertentu berdasarkan ukuran layar atau orientasi perangkat. Visibility Classes dalam Foundation menyediakan cara yang mudah dan efisien untuk mengontrol tampilan elemen HTML tanpa perlu menulis banyak kode CSS kustom.1 Tutorial kali ini akan membahas bagaimana cara memanfaatkan kelas-kelas visibilitas ini. […]
Tutorial Foundation #4: Membangun Form dengan Foundation
Formulir (form) adalah salah satu elemen terpenting dalam interaksi pengguna dengan sebuah situs web. Foundation menyediakan berbagai kelas yang memudahkan kita untuk membuat formulir yang rapi, responsif, dan mudah diakses. Pada tutorial ini, kita akan mempelajari cara memanfaatkan fitur-fitur form Foundation. Konsep Dasar Foundation memberikan styling dasar untuk elemen form HTML […]