belajar bootstrap4, tutorial Bootstrap 4

Membuat Alert dengan Bootstrap 4 | Tutorial Bootstrap 4

Salah satu kelebihan CSS Bootstrap adalah mampu membuat alert dengan cara yang sangat sederhana. Bootstrap 4 telah menyediakan nama class khusus untuk membuat alert secara mudah yaitu class .alert. Dengan hanya menyisipkan class ini maka alert akan muncul di website anda.

Contoh cara menampilkan Alert di Bootstrap 4

Berikut ini adalah contoh cara menampilkan alert di Bootstrap4:

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Hasilnya adalah sebagai berikut:

Success! Indicates a successful or positive action.

Cara Mengganti warna Alert di Bootstrap 4

Tambahan class .alert-success adalah berfungsi untuk mendefinisikan jenis alert atau warna alert. Beberapa class untuk mendefinisikan warna alert adalah sebagai berikut:

alert-success Contoh alert
alert-info Contoh alert
alert-warning Contoh alert
alert-danger Contoh alert
alert-primary Contoh alert
alert-secondary Contoh alert
alert-dark Contoh alert

Setelah kita memahami bagaimana cara mengatur warna alert di bootstrap 4, langkah berikutnya yaitu belajar membuat tombol close di alert bootstrap 4.

Cara menambahkan tombol Close di Alert

Tahapan berikutnya adalah menambahkan tombol close “x” di pojok kanan atas alert. caranya adalah dengan menambahkan class .alert-dismissible di tag div utama, kemudian tambahkan button tag dengan nama class .close sebagai berikut:

<<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Hasilnya adalah seperti ini:


Success! Indicates a successful or positive action.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Another Article

loading...