Cara Membuat Alert pada HTML menggunakan Bootstrap 4 dan Macam-macam alertnya – Hai ketemu lagi dengan saya dewan komputer dan pasa postingan kali ini saya akan membahas lagi tentang bootstrap sebab masih ada banyak yang bisa digunakan untuk keperluan developer dengan bootstrap. Dan bootstrap ini tidak hanya digunakan di PHP saja melainkan bisa digunakan juga di bahasa pemrograman lain contohnya Spring karena untuk tampilannya juga menggunakan HTML atau JSP yang dasarnya dari HTML juga. Oleh karena itu wajib bagi para developer untuk mempelajari bootstrap ini.
Pada contoh nanti saya akan menjelaskan tentang bagaimana cara membuat alert standar, alert dengan icon, alert dengan tombol close pada sebelah kanan atas dan lain-lain. Sebenarnya ini masih standar sekali mengingat ada banyak sekali yang bisa dimodifikasi dari alert ini namun pada postingan kali ini saya hanya akan membahas dasarnya saja.
Sebelum membuat alert tentunya sobat memerlukan beberapa librari css dan js. Yang paling wajib tentunya adalah bootstrap dan karena kita juga akan membuatnya dengan icon maka kita juga memerlukan fontawesome.css karena dalam boostrap tidak ada iconnya. Dan karena ini unutk keperluan demo jadi saya menggunakan librari css dan js online. Jika sobat ingin menggunakan untuk keperluan development tentu sobat harus mendownloadnya terlebih dahulu. Atau sobat bisa mendownloadnya bersama dengan project ini pada akhir postingan. Pada tag <head> tambahkan dengan baris dibawah
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
1. Alert Standar
Alert standar ini tentunya adalah alert yang paling mudah penggunaannya. Caranya adalah sebagai berikut
<div class="alert alert-primary" role="alert"> This is a primary alert—check it out! </div> <div class="alert alert-secondary" role="alert"> This is a secondary alert—check it out! </div> <div class="alert alert-success" role="alert"> This is a success alert—check it out! </div> <div class="alert alert-danger" role="alert"> This is a danger alert—check it out! </div> <div class="alert alert-warning" role="alert"> This is a warning alert—check it out! </div> <div class="alert alert-info" role="alert"> This is a info alert—check it out! </div> <div class="alert alert-light" role="alert"> This is a light alert—check it out! </div> <div class="alert alert-dark" role="alert"> This is a dark alert—check it out! </div>
Tampilannya :
2. Alert dengan Link dan Icon atau Gambar
Ini sudah termasuk jenis custom alert karena kita bisa menambahkan apapun disini. Kita bisa menambahkan icon bahkan juga bisa menambahkan gambar apapun. Cara membuat alert dengan icon atau gambar adalah sebagai berikut :
<div class="alert alert-primary" role="alert">
<div class="row vertical-align">
<div class="col-sm-1 text-center">
<i class="fa fa-info fa-2x"></i>
</div>
<div class="col-sm-11">
Primary alert dengan link. Ini adalah <a href="#" class="alert-link"> contoh link</a>.
</div>
</div>
</div>
<div class="alert alert-secondary" role="alert">
<div class="row vertical-align">
<div class="col-sm-1 text-center">
<i class="fa fa-exclamation-triangle fa-2x"></i>
</div>
<div class="col-sm-11">
Secondary alert dengan link. Ini adalah <a href="#" class="alert-link"> contoh link</a>.
</div>
</div>
</div>
<div class="alert alert-success" role="alert">
<div class="row vertical-align">
<div class="col-sm-1 text-center">
<i class="fa fa-check fa-2x"></i>
</div>
<div class="col-sm-11">
Success alert dengan link. Ini adalah <a href="#" class="alert-link"> contoh link</a>.
</div>
</div>
</div>
<div class="alert alert-danger" role="alert">
<div class="row vertical-align">
<div class="col-sm-1 text-center">
<i class="fa fa-times-circle fa-2x"></i>
</div>
<div class="col-sm-11">
Danger alert dengan link. Ini adalah <a href="#" class="alert-link"> contoh link</a>.
</div>
</div>
</div>
<div class="alert alert-warning" role="alert">
<div class="row vertical-align">
<div class="col-sm-1 text-center">
<i class="fa fa-exclamation-triangle fa-2x"></i>
</div>
<div class="col-sm-11">
Warning alert dengan link. Ini adalah <a href="#" class="alert-link"> contoh link</a>.
</div>
</div>
</div>
<div class="alert alert-info" role="alert">
<div class="row vertical-align">
<div class="col-sm-2 text-center">
<img src="dk.png" width="75px">
</div>
<div class="col-sm-10">
Info alert dengan link. Ini adalah <a href="#" class="alert-link"> contoh link</a>.
</div>
</div>
</div>
<div class="alert alert-light" role="alert">
<div class="row vertical-align">
<div class="col-sm-2 text-center">
<img src="dk.png" width="75px">
</div>
<div class="col-sm-10">
light alert dengan link. Ini adalah <a href="#" class="alert-link"> contoh link</a>.
</div>
</div>
</div>
<div class="alert alert-dark" role="alert">
<div class="row vertical-align">
<div class="col-sm-2 text-center">
<img src="dk.png" width="75px">
</div>
<div class="col-sm-10">
Primary alert dengan link. Ini adalah <a href="#" class="alert-link"> contoh link</a>.
</div>
</div>
</div>
Tampilan :
Penjelasan :
Pada baris dibawah merupakan kode untuk menampilkan iconnya. Pada contoh diatas bukanlah icon yang permanen namun itu suka-suka saya dan sobat juga bisa menggantinya dengan suka-suka sobat, untuk contoh gambarnya sobat bisa lihat pada web fontawesome disini.
<i class="fa fa-info fa-2x"></i>
Sobat hanya peru mengganti ‘fa-info’ menjadi apapun yang sobat inginkan misalkan ‘fa-car’, sedangkan kode fa-2x merupakan besar iconnya berarti 2x lebih besar dari standarnya. Coba sobat hapus kode itu maka iconnya akan menjadi lebih kecil.
Sedangkan untuk custom gambar kita bisa mengambilnya dari direktori kita. Sobat bisa lihat pada baris
<img src="dk.png" width="75px">
baris itu tentunya menggantikan baris sebelumnya yang diisi oleh icon dari fontawesome.
3. Alert dengan Tombol Close
Dengan alert ini kita bisa menutup pemberitahuannya secara manual. Cara penggunaannya adalah sebagai berikut :
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
<div class="alert alert-primary alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Primary!</strong> Indicates an important action.
</div>
<div class="alert alert-secondary alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Secondary!</strong> Indicates a slightly less important action.
</div>
<div class="alert alert-dark alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Dark!</strong> Dark grey alert.
</div>
<div class="alert alert-light alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Light!</strong> Light grey alert.
</div>
Tampilannya :
4. Alert Dengan Animasi dan Icon/Gambar
Pada jenis ini kita juga bisa custom tentunya dengan menambahkan link, icon ataupun gambar dan masih banyak lagi. Namun intinya pada jenis ini saat diklik close maka akan ada animasinya tidak langsung hilang. Contoh nya adalah sebagai berikut :
<div class="alert alert-success alert-dismissible fade show">
<div class="row vertical-align">
<div class="col-sm-1 text-center">
<i class="fa fa-check fa-2x"></i>
</div>
<div class="col-sm-11">
<strong>Success!</strong> Closing Alert dengan icon dan animasi.
</div>
</div>
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
<div class="alert alert-info alert-dismissible fade show">
<div class="row vertical-align">
<div class="col-sm-1 text-center">
<i class="fa fa-info fa-2x"></i>
</div>
<div class="col-sm-11">
<strong>Info!</strong> Closing Alert dengan icon dan animasi.
</div>
</div>
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
<div class="alert alert-warning alert-dismissible fade show">
<div class="row vertical-align">
<div class="col-sm-1 text-center">
<i class="fa fa-exclamation-triangle fa-2x"></i>
</div>
<div class="col-sm-11">
<strong>Warning!</strong> Closing Alert dengan icon dan animasi.
</div>
</div>
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
<div class="alert alert-danger alert-dismissible fade show">
<div class="row vertical-align">
<div class="col-sm-1 text-center">
<i class="fa fa-times-circle fa-2x"></i>
</div>
<div class="col-sm-11">
<strong>Danger!</strong> Closing Alert dengan icon dan animasi.
</div>
</div>
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
<div class="alert alert-primary alert-dismissible fade show">
<div class="row vertical-align">
<div class="col-sm-2 text-center">
<img src="dk.png" width="75px">
</div>
<div class="col-sm-10">
<strong>Primary!</strong> Closing Alert dengan icon dan animasi.
</div>
</div>
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
<div class="alert alert-secondary alert-dismissible fade show">
<div class="row vertical-align">
<div class="col-sm-2 text-center">
<img src="dk.png" width="75px">
</div>
<div class="col-sm-10">
<strong>Secondary!</strong> Closing Alert dengan icon dan animasi.
</div>
</div>
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
<div class="alert alert-dark alert-dismissible fade show">
<div class="row vertical-align">
<div class="col-sm-2 text-center">
<img src="dk.png" width="75px">
</div>
<div class="col-sm-10">
<strong>Dark!</strong> Closing Alert dengan icon dan animasi.
</div>
</div>
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
<div class="alert alert-light alert-dismissible fade show">
<div class="row vertical-align">
<div class="col-sm-2 text-center">
<img src="dk.png" width="75px">
</div>
<div class="col-sm-10">
<strong>Light!</strong> Closing Alert dengan icon dan animasi.
</div>
</div>
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
Tampilan :
5. Alert dengan Konten Tambahan
Alert yang satu ini sebenarnya sangat bisa dicustom, namun sobat bisa mencoba-cobanya sendiri karena alert ini biasanya ada pada pemberitahuan di menu paling atas ukurannya pun full width menyesuaikan width dari aplikasi sobat dan sobat bisa menambahkan penjelasan atau kontent. Cara penulisannya adalah sebagai berikut :
<div class="alert alert-success" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <div class="alert alert-info" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <div class="alert alert-warning" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <div class="alert alert-danger" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <div class="alert alert-primary" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <div class="alert alert-secondary" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <div class="alert alert-dark" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div>
Tampilannya :
Bagaimana mudah bukan. Kita tidak perlu membuat cssnya secara manual karena semua itu sudah ada pada bootstrap. Sehingga ini akan mempercepat kita dalam membangun sebuah aplikasi yang eye catching tentunya karena warna dari bootstrap itu tidak mencolok. Jika kita membuat sendiri belum tentu bisa seenak ini dilihatnya dan yang paling penting adalah memperlama kita dalam membuat aplikasi karena jika di dunia kerja kita selalu dituntut untuk kerja cepat karena jika tidak cepat maka kita tidak bisa bersaing dengan para programmer lain.
Sekian postingan saya tentang Membuat Alert pada HTML menggunakan Bootstrap 4. Jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah. Sampai ketemu pada postingan saya selanjutnya.
Baca juga :
Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah
Macam-macam Form Input pada HTML dan Bootstrap
Cara Membuat SweetAlert dan Macam-Macamnya pada PHP
Membuat Bootstrap Modal dan Animasinya pada PHP
Membuat Badges Menggunakan Bootstrap 4
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :