Bootstrap

Topik Pembahasan
• Class pada gambar
• Menggunakan Class Alert untuk Menampilkan pesan
• Class Button
• Class Button Group
• Class Badge
Class Gambar
• Bootstrap 5 menyediakan beberapa class untuk memberikan bentuk
pada gambar
.rounded  memberikan sudut melingkar pada gambar
.rounded-circle  membuat gambar berbentuk lingkaran
.img-thumbnail  membuat gambar mini dengan border
.img-fluid  membuat ukuran gambar secara responsive
Untuk Menentukan Posisi gambar di kiri atau di kanan dapat menggunakan class
.float-start  Posisi kiri
.float-end  Posisi Kanan
Alert
• Alert merupakan class yang disediakan oleh Bootstrap untuk menampilkan pesan kepada
pengguna.
• Untuk menampilkan alert, bootstrap menyediakan beberapa class antara lain
.alert  Class utama untuk membuat alert
Untuk memberikan warna alert, class yang digunakan antara lain
.alert-success
.alert-info
.alert-warning
.alert-danger
.alert-primary
.alert-secondary
.alert-ligth
.alert-dark
Menutup Alert
• Untuk menutup alert yang muncul dapat menambahkan class berikut
pada container alert
.alert-dismissible
Kemudian menambahkan class=“btn-close” dan menambahkan data-bs-
dismiss=“alert” pada elemen link maupun button
Untuk memberikan efek pada saat Alert di close, maka dapat
menambahkan class .fade .show pada container
Button
• Bootstrap 5 menyediakan beberapa class yang dapat digunakan untuk mengubah sebuah
elemen menjadi tombol
.btn  Merupakan Class utama Button
Untuk memberikan warna pada tombol dapat menggunakan beberapa class, al
.btn-primary
.btn-secondary
.btn-success
Class Button juga dapat dipakai pada
.btn-info
elemen <a>, <button>, <input>
.btn-warning
.btn-danger
.btn-dark
.btn-light
.btn-dark
Button Outline
• Bootstrap 5 juga menyediakan class untuk membuat tombol berbentuk bingkai
• Ketika mouse diarahkan ke tombol tersebut, maka akan menampilkan warna
sesuai dengan class yang diberikan
• Untuk memberikan class outline sesuai dengan warna masing-masing dapat
menggunakan class-class berikut

.btn-outline-primary .btn-outline-danger
.btn-outline-success .btn-outline-dark
.btn-outline-secondary .btn-outline-ligth
.btn-outline-info
.btn-outline-warning
Ukuran Button
• Untuk menentukan ukuran button pada bootstrap 5 dapat
menambahkan class berikut pada class .btn
.btn-lg  Button ukuran besar (Large)
.btn-sm  Button ukuran kecil (Small)
Apabila tidak menyertakan ukuran button, maka bootstrap akan
menggunakan ukuran default.
Untuk membuat ukuran tombol penuh layar dapat menambahkan class
.btn-block
Untuk membuat tombol tidak dapat di klik dapat menambakan class
.disabled atau menambahkan atribut disable pada elemen HTML
Button Group
• Untuk menggabungkan / merapatkan beberapa tombol dapat
menggunakan class .btn-group
• Class .btn-group akan menggabungkan tombol secara horizontal
• Class .btn-group di tambahkan pada elemen <div>, lalu diikuti dengan
button – button yang akan di gabungkan beserta dengan class nya
masing-masing
• Untuk mengatur ukuran button yang di groupkan, dapat menambahkan
class .btn-group-lg (Ukuran Besar) dan class .btn-group-sm (Ukuran
Kecil)
• Untuk menggabungkan button secara vertical dapat menggunakan class
.btn-group-vertical
Badge
• Badge pada Bootstrap merupakan sebuah kotak kecil yang biasanya di
pakai untuk menampilkan informasi pada dokumen HTML/halaman web
• Misal nya pemberitahuan jumlah Email Masuk, pemberitahuan status
user dll
• Untuk menggunakan nya dapat memanggil class .badge
• Untuk pemberian warna pada badge dapat menggunakan class
pewarnaan
.bg-secondary, .bg-success, .bg-danger, .bg-waring, .bg-info, .bg-
light, .bg-dark
Gunakan elemen <span> untuk menampilkan badge dengan elemen
lainnya