Berikut adalah contoh kode untuk membuat Input Groups dengan menggunakan Bootstrap 5
HTML
<!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>
<body>
<div class="container mt-3">
<h3>Input Groups</h3>
<form>
<div class="mb-3">
<div class="input-group">
<span class="input-group-text">Nama:</span>
<input type="text" class="form-control" placeholder="Masukkan nama Anda">
</div>
</div>
<div class="mb-3">
<div class="input-group">
<span class="input-group-text">Email:</span>
<input type="email" class="form-control" placeholder="Masukkan alamat email Anda">
</div>
</div>
<div class="mb-3">
<div class="input-group">
<span class="input-group-text">Password:</span>
<input type="password" class="form-control" placeholder="Masukkan password Anda">
</div>
</div>
<div class="mb-3">
<div class="input-group">
<span class="input-group-text">Telepon:</span>
<input type="tel" class="form-control" placeholder="Masukkan nomor telepon Anda">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>Input Groups
Dengan menggunakan kode di atas, Anda dapat membuat Input Groups dengan mudah menggunakan Bootstrap 5. Anda dapat menyesuaikan atribut dan placeholder sesuai dengan kebutuhan Anda.
Semoga contoh kode di atas bermanfaat bagi Anda dalam membuat form dengan Input Groups menggunakan Bootstrap 5.
Leave a Reply