Home / Bootstrap / Tutorial Bootstrap Bagian 11: Membuat List Group Dengan Bootstrap

Tutorial Bootstrap Bagian 11: Membuat List Group Dengan Bootstrap

Tutorial bootstrap kali ini kita akan membahas cara membuat list group dengan bootstrap. Dalam website, List digunakan untuk memberikan daftar sebuah informasi yang sudah di kelompokkan berdasarkan jenis, tipe, kategori dan lain sebagainya. Misalnya, saat kita mengunjungi sebuah website jual beli, maka akan di tampilkan daftar menu/link berdasarkan kategori atau jenis barang yang di jual. Cara menampilkan item-item yang sudah dikategorikan tersebut menggunakan list. (baca juga: Membuat Navigation Bar(Navbar) dan Dropdown Menu dengan Bootstrap)

Untuk membuat list, bootstrap juga menyediakan class yang dapat kita gunakan, baik itu hanya sekedar list tanpa link, terdapat link, mengubah warna list maupun list yang di sertakan keterangan singkat. Semua class Css tersebut sudah siap saji. 🙂 List yang disertai icon juga memungkinkan dengan bootstrap, silakan di baca tutorial sebelumnya tentang Cara Menggunakan Icon Glyphicon pada Bootstrap.

Penggunaan class list bootstrap juga tidak berbeda dengan penggunaan class lainnya. Kita hanya cukup memanggil class list-group pada tag <ul> dan class list-group-item pada tag <li>. Selain itu, class list bootstrap juga dapat digunakan di paragraf <p>, heading <h> ataupun link <a>.

Contoh penggunaanya dalam tag <ul> dan <li> adalah sebagai berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat List Dengan Bootstrap - ITgeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <ul class="list-group">
                  <li class="list-group-item">Bootstrap</li>
                  <li class="list-group-item">PHP</li>
                  <li class="list-group-item">VB.Net</li>
                  <li class="list-group-item">C++</li>
                  <li class="list-group-item">Java</li>
                  <li class="list-group-item">SQL Server</li>
                  <li class="list-group-item">MySql/MariaDB</li>
                </ul>
            </div>
        </div>
    </div>
  <script src="js/jQuery v3.2.0.js"></script>
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Pada contoh diatas, untuk membuat list adalah dari baris 11 sampai 19. Seperti yang saya sampaikan sebelumnya, untuk membuat list group dengan bootstrap terlebih dahulu pada baris 11 kita harus buatkan class list-group pada tag <ul>, kemudian pada baris 12 sampai 18 gunakan class list-group-item pada tag <li>, beserta isikan item listnya.

Hasil contoh pertama membuat list group dengan bootstrap sebagai berikut:

Tampilan list group dengan bootstrap

Dalam membuat sebuah daftar link menu per kategori, kita juga bisa sertakan badge dalam list group. Seperti contoh sebelumnya kita ingin menampilkan jumlah tutorial berdasarkan kategorinya maka kita gunakan badge. Penggunaan Badge dalam list sebagai berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat List Dengan Bootstrap - ITgeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h3>Tutorial ItGeek.id </h3>
                <ul class="list-group">
                  <li class="list-group-item">Bootstrap <span class="badge">25</span></li>
                  <li class="list-group-item">PHP <span class="badge">30</span></li>
                  <li class="list-group-item">VB.Net <span class="badge">17</span></li>
                  <li class="list-group-item">C++ <span class="badge">28</span></li>
                  <li class="list-group-item">Java <span class="badge">19</span></li>
                  <li class="list-group-item">SQL Server <span class="badge">25</span></li>
                  <li class="list-group-item">MySql/MariaDB <span class="badge">22</span></li>
                </ul>
            </div>
        </div>
    </div>
  <script src="js/jQuery v3.2.0.js"></script>
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Class badge berada dalam tag <li>, cara penggunaanya cukup dengan <span class=”badge”> isi </span>. Hasil contoh kedua membuat list group dengan bootstrap sebagai berikut:

Tampilan 2 list group dengan bootstrap

Class list-group, tidak hanya bisa digunakan dalam sebuah list namun dapat juga digunakan dalam sebuah <div>. Contoh penggunaanya seperti berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat List Dengan Bootstrap - ITgeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h3>Tutorial ItGeek.id </h3>
                <div class="list-group">
                  <a href="#" class="list-group-item active">Bootstrap <span class="badge">25</span></a>
                  <a href="#" class="list-group-item">PHP <span class="badge">30</span></a>
                  <a href="#" class="list-group-item">VB.Net <span class="badge">17</span></a>
                  <a href="#" class="list-group-item">C++ <span class="badge">28</span></a>
                  <a href="#" class="list-group-item">Java <span class="badge">19</span></a>
                  <a href="#" class="list-group-item">SQL Server <span class="badge">25</span></a>
                  <a href="#" class="list-group-item">MySql/MariaDB <span class="badge">22</span></a>
                </div>
            </div>
        </div>
    </div>
  <script src="js/jQuery v3.2.0.js"></script>
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Pada contoh diatas, baris 12 list-group berada class tersendiri <div class=”list-group”> dan class list-group-item beserta class badge berada dalam link.

Hasil contoh ketiga membuat list group dengan bootstrap adalah sebagai berikut

Tampilan 3 list group dengan bootstrap

Secara default jika kita berikan class active pada sebuah link(lihat baris 13 kode diatas), maka otomatis akan berwana biru. Bootstrap juga menyediakan class untuk mengubah warna pada class list-group-item, class yang dapat digunakan untuk pilihan warna adalah sebagai berikut

  • list-group-item-success
    Untuk membuat item list berwarna hijau
  • list-group-item-info
    Untuk membuat item list berwarna biru
  • list-group-item-warning
    Untuk membuat item list berwarna kuning
  • list-group-item-danger
    Untuk membuat item list berwarna merah

Contoh penggunaan class untuk mengubah warna pada item list seperti berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat List Dengan Bootstrap - ITgeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h3>Tutorial ItGeek.id </h3>
                <div class="list-group">
                  <a href="#" class="list-group-item  active">Bootstrap <span class="badge">25</span></a>
                  <a href="#" class="list-group-item list-group-item-warning">PHP <span class="badge">30</span></a>
                  <a href="#" class="list-group-item list-group-item-success">VB.Net <span class="badge">17</span></a>
                  <a href="#" class="list-group-item list-group-item-info">C++ <span class="badge">28</span></a>
                  <a href="#" class="list-group-item list-group-item-danger">Java <span class="badge">19</span></a>
                  <a href="#" class="list-group-item">SQL Server <span class="badge">25</span></a>
                  <a href="#" class="list-group-item">MySql/MariaDB <span class="badge">22</span></a>
                </div>
            </div>
        </div>
    </div>
  <script src="js/jQuery v3.2.0.js"></script>
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Pada contoh diatas, penggunaan class list-group-item dapat dilihat pada baris 14 sampai 17. Pada baris 14 tinggal ditambahkan class list-group-item-warning untuk mengubah warna item list menjadi warna kuning.

Hasil contoh keempat list group dengan bootstrap seperti gambar berikut

Tampilan 4 list group dengan bootstrap

Untuk memberikan keterangan list pada sebuah pada sebuah paragraf atau tag <p>, bootstrap juga menyediakan class list-group-item-text. Dengan penggunaan class ini kita dapat memberikan keterangan singkat pada sebuah list item. Contoh penggunaanya seperti berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat List Dengan Bootstrap - ITgeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="list-group">
                  <a href="#" class="list-group-item active">
                    <h4 class="list-group-item-heading">Bootstrap</h4>
                    <p class="list-group-item-text">Kumpulan tutorial Bootstrap
                    Donec id elit non mi porta gravida at eget metus. 
                    Maecenas sed diam eget risus varius blandit.
                    </p>
                  </a>
                </div>
                <div class="list-group">
                  <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">PHP</h4>
                    <p class="list-group-item-text">Kumpulan tutorial PHP
                    Donec id elit non mi porta gravida at eget metus. 
                    Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta
                    </p>
                  </a>
                </div>
                <div class="list-group">
                  <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">VB.Net</h4>
                    <p class="list-group-item-text">Kumpulan tutorial VB.Net
                    VB.Net Donec id elit non mi porta gravida at eget metus. 
                    Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta
                    </p>
                  </a>
                </div>
                <div class="list-group">
                  <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">MariaDB</h4>
                    <p class="list-group-item-text">Kumpulan tutorial VB.Net
                    MariaDB Donec id elit non mi porta gravida at eget metus. 
                    Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta
                    </p>
                  </a>
                </div>
            </div>
        </div>
    </div>
  <script src="js/jQuery v3.2.0.js"></script>
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Contoh diatas, untuk membuat item list terletak pada baris 11 sampai 46. Pada baris 11 sama dengan sebelumnya, class group-list berada dalam <div> hanya saja isi dalam link atau diantara tag <a> dan </a>(baris 30 dan baris 36) adalah keterangan singkat berupa paragraf yang menggunakan class list-group-item-text dan judulnya pada heading (baris 31) menggunakan class list-group-item-heading. (baca: Membuat Panel dengan Bootstrap)

Hasil contoh kelima membuat list group dengan bootstrap adalah sebagai berikut

Tampilan 5 list group dengan bootstrap

Demikian tutorial Membuat List Group Dengan Bootstrap yang mempermudah kita untuk menata list baik itu dalam menu, langusng di content, dalam bentuk link, heading maupun di dalam sebuah paragraf. Selamat mencoba dan semoga bermanfaat!

Tutorial selanjutnya adalah Membuat Tabs dan Pills dengan Bootstrap. Tabs dan Pills adalah alterlatif lain untuk membuat navigasi menu selain Navbar.

Comments

comments

About Roberto Kaban

Roberto Kaban
My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial Bootstrap Bagian 13: Membuat Jumbotron Dengan Bootstrap

Tutorial bootstrap kali ini membahas cara membuat jumbotron dengan bootstrap. Jumbotron umumnya ditempatkan pada halaman …

Leave a Reply

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