Membuat Alert pada HTML menggunakan Bootstrap 4

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

1. Alert Standar

Alert standar ini tentunya adalah alert yang paling mudah penggunaannya. Caranya adalah sebagai berikut

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 :

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.

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

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 :

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 :

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 :

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 :

Sampai jumpa pada postingan saya selanjutnya..

8 thoughts on “Membuat Alert pada HTML menggunakan Bootstrap 4

  1. Pingback: - Dewan Komputer

Leave a Reply

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

nine + 20 =