Bootstrap adalah salah satu framework front-end yang paling populer yang digunakan oleh banyak pengembang web untuk membangun tampilan situs web yang menarik dan responsif. Salah satu fitur penting dari Bootstrap adalah komponen-komponennya yang dapat digunakan untuk membuat tampilan web yang konsisten dan mudah diakses oleh pengguna. Salah satu komponen yang sering digunakan adalah toaster atau pesan pop-up yang muncul pada bagian atas atau bawah halaman untuk memberikan notifikasi atau informasi kepada pengguna.


Mengenal Toaster di Bootstrap Toaster di Bootstrap adalah komponen yang digunakan untuk menampilkan pesan atau notifikasi pada halaman web. Toaster ini dapat digunakan untuk memberi tahu pengguna tentang perubahan status pada situs web, seperti berhasil melakukan login, sukses menambahkan produk ke keranjang belanja, atau gagal melakukan proses transaksi. Toaster dapat muncul pada bagian atas atau bawah halaman dan akan hilang secara otomatis setelah beberapa detik.

Cara Menggunakan Toaster di Bootstrap Untuk menggunakan toaster di Bootstrap, Anda harus terlebih dahulu memasukkan kode Bootstrap ke dalam situs web Anda. Setelah itu, Anda dapat memulai dengan membuat toaster sederhana dengan cara sebagai berikut:

  1. Buat elemen HTML untuk toaster Untuk membuat toaster, Anda perlu membuat elemen HTML yang akan menampung pesan toaster. Elemen HTML ini dapat berupa <div> atau <span> dengan kelas yang sesuai, misalnya:
php
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Notifikasi</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Pesan notifikasi akan muncul di sini.
  </div>
</div>
  1. Panggil JavaScript untuk menampilkan toaster Setelah membuat elemen HTML, Anda perlu memanggil JavaScript untuk menampilkan toaster. Anda dapat menggunakan kode berikut:
php
<script>
  $(document).ready(function(){
    $('.toast').toast('show');
  });
</script>

Kode ini akan menampilkan toaster pada halaman web saat dokumen telah siap untuk ditampilkan.

  1. Tambahkan gaya untuk toaster Terakhir, Anda dapat menambahkan gaya untuk toaster dengan menggunakan CSS. Anda dapat menyesuaikan tampilan toaster, seperti posisi, warna latar belakang, ukuran font, dan sebagainya.
css
.toast {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  background-color: #333;
  color: #fff;
  font-size: 16px;
  padding: 10px;
}

Dalam contoh ini, toaster ditempatkan pada sudut kanan atas halaman, dengan lebar 300 piksel, warna latar belakang hitam (#333), dan ukuran font 16 piksel.