Bagaimana cara memusatkan kartu di bootstrap?

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

Kartu Dasar

Kartu dasar dibuat dengan kelas .card, dan konten di dalam kartu memiliki kelas .card-body

Contoh

Kartu dasar

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

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

Gambar Kartu

John Doe

Beberapa contoh teks beberapa contoh teks. John Doe adalah seorang arsitek dan insinyur

Jane Doe

Beberapa contoh teks beberapa contoh teks. Jane Doe adalah seorang arsitek dan insinyur

Tambahkan .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

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

Jane Doe

Beberapa contoh teks beberapa contoh teks. Jane Doe adalah seorang arsitek dan insinyur

Contoh

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

Ubah gambar menjadi latar belakang kartu dan gunakan .card-header1 untuk menambahkan teks di atas gambar

Contoh

John Doe

Beberapa contoh teks

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

FCC. FrontEnd_Calculator

...

Bagaimana cara memusatkan kartu di Bootstrap 5?

Bagaimana cara menyesuaikan kartu Bootstrap saya?