Kartu di Bootstrap 4 adalah kotak bertepi dengan beberapa bantalan di sekitar isinya. Ini termasuk opsi untuk header, footer, konten, warna, dll
John Doe
Beberapa contoh teks beberapa contoh teks. John Doe adalah seorang arsitek dan insinyur
Lihat ProfilKartu Dasar
Kartu dasar dibuat dengan kelas .card, dan konten di dalam kartu memiliki kelas .card-body
Contoh
Kartu dasar
Cobalah sendiri "
Jika Anda terbiasa dengan Bootstrap 3, kartu menggantikan panel, lubang, dan thumbnail lama
Header dan Footer
Kelas .card-header_ menambahkan heading ke kartu dan kelas .card-footer menambahkan footer ke kartu
Contoh
Tajuk
Isi
Catatan kaki
Cobalah sendiri "
Kartu Kontekstual
Untuk menambahkan warna latar belakang kartu, gunakan kelas kontekstual (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .card-body0 dan .card-body1
Judul, teks, dan tautan
Gunakan .card-body_2 untuk menambahkan judul kartu ke elemen judul apa pun. Kelas .card-body3 digunakan untuk menghapus margin bawah untuk a
elemen jika itu adalah anak terakhir (atau satu-satunya) di dalam .card-body. Kelas .card-body5 menambahkan warna biru ke tautan apa pun, dan efek hover
Contoh
Judul kartu
Beberapa contoh teks. Beberapa contoh teks
Cobalah sendiri "
Gambar Kartu
John Doe
Beberapa contoh teks beberapa contoh teks. John Doe adalah seorang arsitek dan insinyur
Lihat ProfilJane Doe
Beberapa contoh teks beberapa contoh teks. Jane Doe adalah seorang arsitek dan insinyur
Lihat ProfilTambahkan .card-body_6 atau .card-body7 ke .card-body8 untuk menempatkan gambar di bagian atas atau bawah di dalam kartu. Perhatikan bahwa kami telah menambahkan gambar di luar .card-body untuk menjangkau seluruh lebar
Contoh
John Doe
Beberapa contoh teks
Cobalah sendiri "
Tautan Terbentang
Tambahkan kelas .card-header_0 ke tautan di dalam kartu, dan itu akan membuat seluruh kartu dapat diklik dan dilayangkan (kartu akan bertindak sebagai tautan)
John Doe
Beberapa contoh teks beberapa contoh teks. John Doe adalah seorang arsitek dan insinyur
Lihat ProfilJane Doe
Beberapa contoh teks beberapa contoh teks. Jane Doe adalah seorang arsitek dan insinyur
Lihat ProfilContoh
Cobalah sendiri "Hamparan Gambar Kartu
John Doe
Beberapa contoh teks beberapa contoh teks. Beberapa contoh teks beberapa contoh teks. Beberapa contoh teks beberapa contoh teks. Beberapa contoh teks beberapa contoh teks
Lihat ProfilUbah gambar menjadi latar belakang kartu dan gunakan .card-header1 untuk menambahkan teks di atas gambar
Contoh
John Doe
Beberapa contoh teks
Cobalah sendiri "
Kolom Kartu
Beberapa teks di dalam kartu pertama
Beberapa teks di dalam kartu kedua
Beberapa teks di dalam kartu ketiga
Beberapa teks di dalam kartu keempat
Beberapa teks di dalam kartu kelima
Beberapa teks di dalam kartu keenam
Kelas .card-header_2 membuat kisi kartu seperti batu (seperti pinterest). Tata letak akan menyesuaikan secara otomatis saat Anda memasukkan lebih banyak kartu
Catatan. Kartu ditampilkan secara vertikal pada layar kecil (kurang dari 576px), DENGAN margin atas dan bawah
Saya tidak banyak menggunakan Bootstrap selama sertifikasi Desain Web Responsif, jadi saya mencoba mempelajarinya sekarang sambil menyelesaikan beberapa proyek Perpustakaan Front End. Saya telah mendesain kalkulator menggunakan kelas Kartu, tetapi saya tidak tahu cara terbaik untuk memusatkannya secara vertikal dan horizontal pada halaman. Saya sudah mencoba menempatkan kartu di dalam a. col di dalam a. baris di dalam a. wadah, atau hanya di dalam a. container div, tetapi apa pun yang saya lakukan, sepertinya duduk di tepi kiri layar. Saya juga belum dapat menemukan cara terbaik untuk melakukan ini dari dokumen Bootstrap, sebagai tambahan. pusat teks dan/atau. justify-content-center ke div kontainer saya sepertinya tidak berpengaruh
Apa cara terbaik untuk melakukan ini secara umum?
Terima kasih atas saran yang mungkin Anda miliki
Ini tautan ke pena
CodePenFCC. FrontEnd_Calculator
...