List Group Bootstrap

Cara membuat List Group Bootstrap

Tutorial kali ini kita membahas cara membuat list group bootstrap, Dasar pembuatan list group adalah sebagai berikut :

• Tambahkan class .list-group di elemen <ul>.
• Tambahkan juga class list-group-item di elemen <li>

Contoh kode program pembuatan list group bootstrap sebagai berikut :

<ul class="list-group">

<li class="list-group-item">Free Domain Name Registration</li>

<li class="list-group-item">Free Window Space hosting</li>

<li class="list-group-item">Number of Images</li>

<li class="list-group-item">24*7 support</li>

<li class="list-group-item">Renewal cost per year</li>

</ul>

Menambahkan badges di list group

Kita dapat menambahkan komponen badges di list group, posisi badge otomatis akan berada di sebelah kanan. Hanya dengan menambahkan <span class="badge"> di dalam elemen <li>, badge pun jadi. Contoh kode programnya sebagai berikut :

<ul class="list-group">

<li class="list-group-item">Free Domain Name Registration</li>

<li class="list-group-item">Free Window Space hosting</li>

<li class="list-group-item">Number of Images</li>

<li class="list-group-item">

<span class="badge">New</span> 24*7 support

</li>

<li class="list-group-item">Renewal cost per year</li>

<li class="list-group-item">

<span class="badge">New</span>

Disocunt Offer

</li>

</ul>

Linking List Group Items

Untuk membuat linking list group item, kita menggunakan elemen <div> dan elemen <a>. Contoh kode programnya sebagai berikut :

<div class="list-group">

<a href="#" class="list-group-item active">

Free Domain Name Registration

</a>

<a href="#" class="list-group-item">24*7 support</a>

<a href="#" class="list-group-item">Free Window Space hosting</a>

<a href="#" class="list-group-item">Number of Images</a>

<a href="#" class="list-group-item">Renewal cost per year</a>

Menambahkan konten di Linking List Group Items

Kita dapat menambahkan konten HTML apapun didalam linking list group. Contoh programnya sebagai berikut :

<div class="list-group">

<a href="#" class="list-group-item active">

<h4 class="list-group-item-heading">

Starter Website Package

</h4>

</a>

<a href="#" class="list-group-item">

<h4 class="list-group-item-heading">

Free Domain Name Registration

</h4>

<p class="list-group-item-text">

You will get a free domain registration with website pages.

</p>

</a>

<a href="#" class="list-group-item">

<h4 class="list-group-item-heading">

24*7 support

</h4>

<p class="list-group-item-text">

We provide 24*7 support.

</p>

</a>

</div>

<div class="list-group">

<a href="#" class="list-group-item active">

<h4 class="list-group-item-heading">

Business Website Package

</h4>

</a>

<a href="#" class="list-group-item">

<h4 class="list-group-item-heading">

Free Domain Name Registration

</h4>

<p class="list-group-item-text">

You will get a free domain registration with website pages.

</p>

</a>

<a href="#" class="list-group-item">

<h4 class="list-group-item-heading">24*7 support</h4>

<p class="list-group-item-text">We provide 24*7 support.</p>

</a>

</div>