Membuat Collapsible Content pada Bootstrap 4

Penempatan layout pada sebuah website menjadi hal penting agar dapat membuat apapun konten yang kita ingin bagikan ke pengunjung akan tersampaikan dengan baik. Banyak sekali cara untuk menata letak layout atau konten agar dapat terlihat rapi dan mudah dibaca oleh para pengunjung. Seperti menggunakan bootstrap sebagai salah satu framework paling popular. Dengan susunan class yang benar maka kita bisa membuat layout yang sangat rapi dan sangat terlihat professional.

Pada penambahan fitur  bootstrap 4 kita bisa menggunakan fitur collapsible yang di miliki komponen header untuk diterapkan pada tempat lain. Collapsible yang digunakan adalah mirip seperti yang ada pada header bootstrap ketika berada dalam mobile device.

Cara pembuatannya juga sangat mudah, pertama kita hubungkan dahulu file bootstrap 4 ke dalah HTML yang kita punya dengan script dibawah ini.

CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">

 

JAVASCRIPT

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

 

Jika kalian sudah menghubungkan file bootstrap diatas maka sekarang kita akan membuat struktur HTML dan Class untuk membuat collapsible content menggunakan bootstrap 4 menggunakan baris kode dibawah ini

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">DUMET School</h4>
      <span class="text-muted">Kursus Website dan Digital Marketing</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

 

Dengan menggunakan kode diatas kita bisa membuat sebuah elemen  collapsible seperti pada header bootstrap. 

Pada metode diatas kita bisa gunakan secara langsung dimanapun kita inginkan, karena plugin bootstrap tersebut bekerja dengan id dan juga property data-target yang saling dicocokan, sangat mudah sekali diterapkan.

Baiklah teman teman, perkembangan bootstrap saat ini sudah mencapai versi 4.0.0-beta, dimana pada versi ini kita sudah bisa menggunakan bootstrap untuk pengembangan website, namun  karena saat ini masih versi beta, jadi masih ada kemungkinan muncul bug yang belum kita ketahui, tapi tentu pastinya bug tersebut harusnya tidak terlalu berpengaruh besar terhadap pengembangan website. Demikian artikel kali ini yang membahas tentang cara membuat collapsible content menggunakan bootstrap 4

 

DEMO

31 Agustus 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