Berikut ini adalah contoh kode untuk membuat button lengkap dengan menggunakan Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Button dengan Bootstrap</title>
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>Button Outline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Button dengan Bootstrap</title>
</head>
<body>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>Dengan menggunakan class btn-outline-{color}, kita dapat membuat button outline dengan berbagai warna yang tersedia di Bootstrap. Anda dapat mengganti {color} dengan salah satu warna yang diinginkan seperti primary, secondary, success, danger, warning, info, light, atau dark.
Ukuran Button
<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-primary">Default Button</button>
<button class="btn btn-primary btn-sm">Small Button</button>
<button class="btn btn-primary btn-xs">Extra Small Button</button>Dalam contoh di atas, kita menggunakan kelas btn untuk membuat button dengan gaya dasar Bootstrap. Kemudian, kita menambahkan kelas btn-primary untuk memberikan warna latar belakang biru pada button.
Untuk mengatur ukuran button, kita menggunakan kelas tambahan seperti btn-lg untuk ukuran besar, btn-sm untuk ukuran kecil dan btn-xs untuk ukuran sangat kecil.
Button Block Level
<button class="btn btn-primary btn-block btn-lg">Tombol Block Level Besar</button>
<button class="btn btn-primary btn-block">Tombol Block Level Biasa</button>
<button class="btn btn-primary btn-block btn-sm">Tombol Block Level Kecil</button>Dengan menggunakan Bootstrap, Anda dapat dengan mudah membuat tombol block level yang sesuai dengan kebutuhan desain Anda. Selain itu, Bootstrap juga menyediakan banyak kelas dan komponen lain yang dapat membantu Anda dalam mengembangkan tampilan yang menarik dan responsif.
Sekarang Anda dapat mencoba menggunakan kode-kode di atas untuk membuat tombol block level dengan Bootstrap. Selamat mencoba!
Leave a Reply