Cara Membuat Panel di Bootstrap 3, Bisakah Diterapkan di Bootstrap 4 ?

Apa Itu Panel Bootstrap ? Yaitu sebuah kotak yang diberi garis luaran berwarna, sehingga tampak seperti membungkus apapun isi yang ada di dalam kotak tersebut. Ini biasanya digunakan untuk menampilkan hal-hal yang dianggap perlu mendapatkan perhatian lebih dari para pembaca.

Namun, Panel ini berlaku untuk Bootstrap 3 dan sebelumnya. Jika kamu membangun situs menggunakan Bootstrap 4, gunakan Cards saja. Lihat: Perbedaan Bootstrap 3 dan 4 untuk mengetahui lebih lanjut. Ada beberapa hal yang perlu diketahui dalam membuat Panel di Bootstrap 3, mari mulai dari dasar !

Basic Panel

Ini merupakan Panel dasar dari Bootstrap, sebuah kotak yang diberi garis yang akan membungkus apapun di dalamnya.

Untuk membuat basic Panel, cukup gunakan code berikut:

<h2>Basic Panel Bootstrap - Posciety</h2>
  <div class="panel panel-default">
    <div class="panel-body">Ini adalah isi di dalam kotak, dicontohkan dengan tulisan. Kamu dapat mengisinya dengan bebas.</div>
  </div>

Panel Heading

Panel Bootstrap bisa ditambahkan heading, letaknya akan berada di atas dari basic Panel. Panel Heading ini biasanya digunakan untuk menampilkan judul dari konen Panel bersangkutan. Contoh:

Panel Heading memiliki warna dasar yang cenderung lebih pudar ketimbang konten / isi Panel, ini agar dapat dengan mudah membedakan setiap bagiannya. Untuk membuat Panel Heading cukup tambahkan class panel-heading sebelum membuka class panel -body.

<h2>Panel Heading - Posciety</h2>
<div class="panel panel-default">
  <div class="panel-heading">Ini Adalah Header Panel (Judul)</div>
  <div class="panel-body">Ini konten / isi dari panel. Masukkan apapun disini.</div>
</div>

Panel Footer

Selain menambahkan bagian atas, kamu juga dapat menambahkan bagian baru di bagian bawah konten Panel. Ini disebutnya Panel Footer, biasanya menampilkan beberapa informasi pendek sepeti tanggal pembuatan konten Panel tersebut.

Membuat Panel Footer cukup dengan menambahkan class panel-footer setelah penutup class panel-body.

<h2>Panel Footer - Posciety</h2>
<div class="panel panel-default">
  <div class="panel-heading">Panel Heading - ini adalah JUDUL PANEL</div>
  <div class="panel-body">Ini adalah isi / konten dari panel, masukkan konten apapun disini untuk berbagi informasi.</div>
  <div class="panel-footer">Rabu - 02 Desember 2018</div>
</div>

Panel Berwarna

Seperti yang pernah dijelaskan sebelumnya mengenai Contextual-Classes, kamu dapat menerapkannya juga untuk Panel. Memberikan warna pada Panel menggunakan Contextual-Classes tentu menjadi lebih mudah namun terbatas, hanya tersedia beberapa warna saja.

Jika melihat contoh-contoh di atas, itu adalah contoh dari panel-default seperti yang terlihat pada struktur kodenya. Tapi, ketika menggunakan contextual-classes tentu harus mengganti bagian belakang (default dengan dengan nama class warna). Contoh:

<h2>Panels Bootstrap Berwarna - Posciety</h2>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">Panel Heading (JUDUL)</div>
      <div class="panel-body">Ini adalah panel menggunakan panel-default</div>
      <div class="panel-footer">default</div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">Panel Heading (JUDUL)</div>
      <div class="panel-body">Ini adalah panel menggunakan class primary</div>
      <div class="panel-footer">primary</div>
    </div>

    <div class="panel panel-success">
      <div class="panel-heading">Panel Heading (JUDUL)</div>
      <div class="panel-body">Ini adalah panel menggunakan class success</div>
      <div class="panel-footer">success</div>
    </div>

    <div class="panel panel-info">
      <div class="panel-heading">Panel Heading (JUDUL)</div>
      <div class="panel-body">Ini adalah panel menggunakan class info</div>
      <div class="panel-footer">info</div>
    </div>

    <div class="panel panel-warning">
      <div class="panel-heading">Panel Heading (JUDUL)</div>
      <div class="panel-body">Ini adalah panel menggunakan class warning</div>
      <div class="panel-footer">warning</div>
    </div>

    <div class="panel panel-danger">
      <div class="panel-heading">Panel Heading (JUDUL)</div>
      <div class="panel-body">Ini adalah panel menggunakan class danger</div>
      <div class="panel-footer">danger</div>
    </div>
  </div>

Hasilnya akan terlihat kurang lebih seperti ini:

Lengkapi isi / konten dari Panel agar terlihat lebih menarik ketika diterapkan di situs Bootstrap yang sedang dibangun.