Berikut adalah contoh Membuat Cards dengan menggunakan Bootstrap
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</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 mt-3">
<h4>Cards</h4>
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="image1.jpg" class="card-img-top" alt="Image 1">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">This is the content of card 1.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="image2.jpg" class="card-img-top" alt="Image 2">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">This is the content of card 2.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="image3.jpg" class="card-img-top" alt="Image 3">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">This is the content of card 3.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Cards
Anda dapat mengganti image1.jpg, image2.jpg, dan image3.jpg dengan URL gambar yang sesuai. Anda juga dapat mengubah judul, konten, dan tombol pada setiap card sesuai kebutuhan Anda.
Dengan menggunakan kode di atas, Anda dapat membuat tampilan cards yang responsif dan menarik dengan menggunakan Bootstrap.
Leave a Reply