Membuat Pesan Alert Dengan Bootstrap

Membuat Pesan Alert Dengan Bootstrap

—

by

Webbiz.ID
in

Berikut adalah contoh untuk membuat pesan alert dengan menggunakan Bootstrap

HTML
<!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>Pesan Alert</title>
</head>
<body>
  <div class="alert alert-success" role="alert">
    Ini adalah pesan alert dengan tipe success.
  </div>

  <div class="alert alert-info" role="alert">
    Ini adalah pesan alert dengan tipe info.
  </div>

  <div class="alert alert-warning" role="alert">
    Ini adalah pesan alert dengan tipe warning.
  </div>

  <div class="alert alert-danger" role="alert">
    Ini adalah pesan alert dengan tipe danger.
  </div>

  <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>
HTML
Pesan Alert

Alert Links

HTML
<!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>Pesan Alert Links</title>
</head>
<body>
  <div class="alert alert-primary" role="alert">
    Ini adalah pesan alert dengan tautan.
    <a href="#" class="alert-link">Klik di sini</a> untuk melihat lebih lanjut.
  </div>

  <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>
HTML
Pesan Alert Links

Closing Alerts

HTML
<!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>Pesan Alert Links</title>
</head>
<body>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Perhatian!</strong> Ini adalah pesan peringatan.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

  <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>
HTML
Pesan Alert Links

Silakan salin kode di atas ke dalam file HTML Anda dan jalankan di browser untuk melihat hasilnya. Anda akan melihat empat pesan alert dengan tipe yang berbeda: success, info, warning, dan danger.

Pastikan Anda telah menyertakan link ke file CSS Bootstrap dan juga file JavaScript Bootstrap yang diperlukan untuk mengaktifkan komponen Bootstrap.

Dengan menggunakan kode di atas, Anda dapat membuat pesan alert dengan mudah dan menyesuaikannya sesuai kebutuhan Anda. Anda dapat mengubah tipe pesan, teks pesan, dan gaya pesan dengan mengubah kelas CSS yang diberikan.

Selamat mencoba!

Artikel Terbaru ⭐