CARD DI BOOTSTRAP 5 ???
|
Apa itu card di Bootstrap 5 ?
Card adalah komponen yang fleksibel dan dapat diperluas untuk menampung konten dengan berbagai varian dan opsi. Card menggantikan panel, well, dan thumbnail dari Bootstrap 3. Card dapat berisi gambar, teks, daftar grup, link, dan banyak lagi. Mereka dibangun dengan flexbox, yang memudahkan penyesuaian dan penyelarasan, serta berintegrasi dengan baik dengan komponen Bootstrap lainnya.
Berikut adalah codingan card di bootstrap 5
tak hanya card,saya juga menambahkan navbar.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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>
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand"><h1>BADOOKING</h1></a>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
<br>
<body>
<div class="container text-center">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem;">
<img src="leonardo-310353-163450459-879059.jpg" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">AYANA Resort Bali</h5>
<p class="card-text">647Q+GP, Jimbaran, Kec. Kuta Sel., Kabupaten Badung, Bali</p>
<a href="#" class="btn btn-primary">BOOKING NOW</a>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img src="hilton-93713-113022107-707958.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Hilton Bali Resort</h5>
<p class="card-text">Jl. Raya Nusa Dua Selatan, Kec.Kuta Sel,Kabupaten Badung, Bali</p>
<a href="#" class="btn btn-primary">BOOKING NOW</a>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img src="grand hyatt.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Grand Hyatt Bali</h5>
<p class="card-text">Kawasan Wisata Nusa Dua BTDC, Jl. Nusa Dua, Badung Regency, Bali</p>
<a href="#" class="btn btn-primary">BOOKING NOW</a>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="container text-center">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem;">
<img src="move.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Mövenpick Resort & Spa</h5>
<p class="card-text">Jl. Wanagiri No.1, Jimbaran, Kec. Kuta Sel., Kabupaten Badung, Bali</p>
<a href="#" class="btn btn-primary">BOOKING NOW</a>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img src="RADISSSON.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Radisson Blu Bali Uluwatu</h5>
<p class="card-text">Jl. Pemutih Jl. Labuansait, Pecatu, Kec. Kuta Sel., Uluwatu, Bali 80361</p>
<a href="#" class="btn btn-primary">BOOKING NOW</a>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img src="s.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">S Resorts Hidden Valley Bali</h5>
<p class="card-text">Uluwatu, Jl. Nabor No.29, Pecatu,Kabupaten Badung, Bali</p>
<a href="#" class="btn btn-primary">BOOKING NOW</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Berikut adalah hasil codingan di atas
0 Comments:
Posting Komentar