Cara menggunakan membuat div ditengah bootstrap
|
Pada tutuorial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 15 : Cara Membuat Style Gambar di Botstrap, selanjutnya kita akan belajar cara membuat card di Bootstrap. Show
Bootstrap memperkenalkan wadah konten baru yang fleksibel dan dapat diperluas — komponen card— menggantikan panel lama, dan komponen thumbnail. Card ini mencakup pilihan untuk header dan footer, berbagai macam konten, warna latar belakang kontekstual, dan pilihan tampilan yang beragam. Membuat Card DasarPembungkus ourter memerlukan class dasar .card, sedangkan konten dapat ditempatkan di dalam .card-body. Contoh berikut akan menunjukkan kepada Anda cara membuat card dengan gambar yang dicampur dengan beberapa konten teks dan tombol.
CodePen Embed FallbackCodePen Embed Fallback Jenis Konten untuk Komponen KartuKomponen card mendukung berbagai macam konten, termasuk gambar, teks, grup daftar, tautan, navigasi, dan banyak lagi. Berikut adalah contoh dari apa yang didukung oleh card tersebut. Body only CardAnda cukup menggunakan .card dengan .card-body di dalamnya, kapan pun Anda perlu membuat kotak padding.
CodePen Embed FallbackCodePen Embed Fallback Card dengan Header dan FooterAnda juga dapat menambahkan header dan footer dalam card menggunakan class .card-header dan .card-footer. Mari kita lihat contoh berikut ini:
CodePen Embed FallbackCodePen Embed Fallback Menempatkan Grup Daftar dalam KartuAnda juga dapat menempatkan grup daftar di dalam card bersama dengan tipe konten lainnya, seperti yang ditampilkan di sini. CodePen Embed FallbackCodePen Embed Fallback Jangan ragu untuk mencampur dan mencocokkan beberapa jenis konten untuk membuat card yang Anda butuhkan. Contoh berikut akan membuat card lebar tetap dengan gambar, teks, grup daftar, dan tautan.
CodePen Embed FallbackCodePen Embed Fallback Kostumasi Card BackgroundAda beberapa pilihan untuk menyesuaikan latar belakang, border, dan warna kartu. Anda dapat menggunakan class utilitas teks dan latar belakang untuk mengubah tampilan kartu.
CodePen Embed FallbackCodePen Embed Fallback Kostumasi Border dan Teks CardAnda juga dapat menyesuaikan warna teks dan border card apa pun menggunakan class utilitas teks dan border. Cukup terapkan class-class ini pada induk .card atau elemen anaknya, seperti yang ditunjukkan di bawah ini:
CodePen Embed FallbackCodePen Embed Fallback Selain style kartu, Bootstrap juga menyertakan beberapa pilihan untuk menyusun rangkaian kartu. Namun, layout ini belum responsif. Membuat Grup CardAnda dapat menggunakan grup card untuk merender card sebagai satu elemen terlampir dengan kolom lebar dan tinggi yang sama. Grup card menggunakan class : flex; untuk mencapai ukuran seragam mereka.
CodePen Embed FallbackCodePen Embed Fallback Membuat Dek CardDek card mirip dengan grup card (yaitu setiap card memiliki lebar dan tinggi yang sama). Satu-satunya perbedaan adalah card tidak terikat satu sama lain. Berikut contohnya:
CodePen Embed FallbackCodePen Embed Fallback Membuat Kolom CardDengan Bootstrap Anda juga dapat membuat grid card seperti Pinterest dengan membungkusnya dalam kolom .card. Card dibuat dengan properti kolom CSS, bukan flexbox untuk memudahkan penyelarasan. Card diurutkan dari atas ke bawah dan kiri ke kanan. Mari kita lihat contohnya:
CodePen Embed FallbackCodePen Embed Fallback Card Image OverlayAnda bahkan dapat mengubah gambar menjadi latar belakang card dan menempatkan teks card di atasnya menggunakan class .card-img-overlay sebagai pengganti .card-body. Bergantung pada gambar, Anda mungkin membutuhkan style tambahan untuk penyesuaian yang lebih baik. Berikut contohnya: 0 CodePen Embed FallbackCodePen Embed Fallback Menentukan Ukuran CardCard tidak memiliki lebar tertentu, lebar 100% secara default. Namun, Anda dapat mengubahnya sesuai kebutuhan dengan CSS khusus, grid class, atau ukuran class utilitas. Mari kita lihat cara kerjanya: 1 CodePen Embed FallbackCodePen Embed Fallback Card dengan Stretched LinkAnda dapat menambahkan class .stretched-link ke link di dalam card agar seluruh card dapat diklik (yaitu, seluruh card berfungsi seperti link). Manakah Class pada bootstrap yang digunakan untuk membuat sistem grid?Class row dan col merupakan class untuk membuat baris dan kolom. Kedua class ini lah yang kita gunakan untuk membuat grid.
Kelas apa yang digunakan dalam bootstrap untuk membuat tombol menjadi lebih besar?untuk mengubah ukuran tombol, bootstrap telah menyediakan class khusus. Untuk membuat tombol yang berukuran kecil, gunakan class .btn-sm. Untuk membuat tombol yang berukuran besar dengan bootstrap, gunakan class .btn-lg.
Apa itu class Row?Class row berfungsi untuk mengubah sifat dari div di dalamnya yang semula akan ditampilkan secara block, akan dapat ditampilkan secara inline. Maka dari itu div di dalamnya dapat dipaparkan secara horizontal. Class col berfungsi untuk mengubah div tersebut menjadi responsif terhadap lebar viewport.
Apa itu gutter dalam sistem grid?Gutters adalah ruang yang memisahkan kolom dan baris. Dengan adanya gutters, maka ruang kosong antara kolom dan baris akan tercipta. Grid system yang dibuat menjadi dasar dari layout slide presentasi.
|
