Membuat Modal pada Bootstrap 4

Modal adalah jendela pop up yang muncul ketika pengunjung melakukan aktivitas tertentu. Pada bootstrap 4 untuk membuat popup modal sangat mudah sekali karena kita bisa langsung menyalin baris program yang sudah di sediakan oleh Bootstrap. Pop up Modal adalah jendela pop up yang muncul untuk memberikan peringatan atau memberikan informasi kepada user atau pengunjung di website kita. Untuk membuat popup modal pada bootstrap 4 sangat mudah sekali, Baiklah sekarang kita coba menerapkannya.

Pertama kita akan membuat sebuah tombol untuk menjadi trigger modal dengan kode berikut

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

 

Selanjutnya kita membuat struktur modal standard dengan menggnakan kode dibawah ini

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

 

Maka hasilnya akan seperti gambar dibawah ini

Pada modal bootstrap sendiri kita juga bisa menggunakan grid system untuk mengisi konten yang ada dalam modal, kita hanya perlu memberikan struktur grid seperti biasa di dalam class modal-body. Contohnya seperti ini.

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

 

Selain itu, kita juga bisa mengatur ukuran modal yang kita buat dengan memberikan tambahan class modal-sm, modal-lg, dan yang lainnya pada class modal-dialog.

<div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
</div>

Baiklah teman-teman, banyak sekali fitur terbaru dari bootstrap 4 yang memungkinkan kita untuk bisa membuat kustomisasi lebih dari yang kita inginkan. Demikian artikel kali ini yang membahas tentang Penerapan popup modal pada bootstrap 4. Semoga bermanfaat.

19 September 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat