BOOTSTRAP V : CARDS
CARDS
Apa itu Bootstrap Cards?
Bootstrap Cards adalah komponen yang menampilkan gambar beserta deskripsi dari gambar tersebut beserta judul.
Contoh Codingan dan Hasil Cards :
Coding :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Masardhan</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h3>Top 3 Summit Indonesia</h3>
<p>
Bagi para pendaki gunung, menginjakkan kaki di puncak tertinggi di
Indonesia merupakan sebuah kepuasan tersendiri. Maka tak heran, ada
istilah 3 puncak (three summits) gunung tertinggi di Indonesia,dan
inilah daftar gunung berikut
</p>
</div>
<div class="d-flex justify-content-center">
<div class="card mx-3" style="width: 18rem">
<img src="puncak-gunungjpeg-20230213030306.jpeg" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">Gunung Jaya Wijaya</h5>
<p class="card-text">
Puncak Jaya Wijaya atau Piramida Carstensz ialah sebuah puncak tertinggi yang menjadi bagian dari Pegunungan Barisan Sudirman
yang terdapat di Kabupaten Mimika, Provinsi Papua Tengah, Indonesia. Puncak Jaya atau Piramida Carstensz mempunyai ketinggian 4.883 mdpl
dan di sekitarnya terdapat gletser dengan nama yang sama yakni gletser Carstensz, satu-satunya gletser tropika di Indonesia,
yang tersisa dan secara perlahan mulai menipis akibat pemanasan global.
</p>
<a href="#" class="btn btn-primary">View More</a>
</div>
</div>
<div class="card mx-3" style="width: 18rem">
<img src="2jpg-33865b703c8b3044721bd03e6c716b17.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">Gunung Kerinci</h5>
<p class="card-text">
Gunung Kerinci (juga dieja dengan "Kerintji") adalah gunung tertinggi di pulau Sumatra dan gunung berapi tertinggi di Indonesia juga Asia Tenggara.
Gunung Kerinci terletak di perbatasan Kabupaten Kerinci, Jambi dan Kabupaten Solok Selatan, Sumatera Barat, di Pegunungan Bukit Barisan dengan ketinggian 3.805 mdpl.
Gunung ini juga menjadi batas antara wilayah Suku Kerinci dengan Etnis Minangkabau yang dikelilingi hutan lebat Taman Nasional Kerinci Seblat, yang merupakan habitat harimau sumatra
dan badak sumatra
</p>
<a href="#" class="btn btn-primary">View More</a>
</div>
</div>
<div class="card mx-3" style="width: 18rem">
<img src="puncak-gunung-rinjani6.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">Gunung Rinjani</h5>
<p class="card-text">
Gunung Rinjani adalah gunung yang berlokasi di Pulau Lombok, Nusa Tenggara Barat.
Gunung yang merupakan gunung berapi kedua tertinggi di Indonesia dengan ketinggian 3.726 mdpl
serta terletak pada lintang 8º25' LS dan 116º28' BT ini merupakan gunung favorit bagi pendaki Indonesia karena keindahan pemandangannya.
Gunung ini merupakan bagian dari Taman Nasional Gunung Rinjani yang memiliki luas sekitar 41.330 ha
dan ini akan diusulkan penambahannya sehingga menjadi 76.000 ha ke arah barat dan timur
</p>
<a href="#" class="btn btn-primary">View More</a>
</div>
</div>
</div>
</body>
</html>
Hasil :
.png)
Komentar
Posting Komentar