Sidebar pada boostrap

Assalamualaikum wr.wb . .
Salam kompak selalu buat para sahabat carikode, Seperti biasa kita masih melanjutkan tutorial sebelumnya.
Sebelumnya kita sudah membuat halaman artikel menggunakan bootstrap, Nah, pada kesempatan kali ini kita akan membuat sidebar menggunakan bootstrap. Sama seperti sebelumnya, sahabat carikode hanya menyambung tutorial sebelumnya.
Buatlah tag div baru dengan class col-lg-4 tepat di akhir penutup tag col-lg-8, Kemudian di dalam tag col-lg-4 buatlah tag dengan class col-lg-12, Berikut syntaxnya :

<div class="col-lg-4"> <div class="col-lg-12"> </div> </div>

1 2 3 4 5

<div class="col-lg-4">      <div class="col-lg-12">        </div> </div>

Kemudian tambahkan tag div dengan class list-group, Berikut syntaxnya :

Sidebar 1

Kemudian buatlah tag link dengan class list-group-item, tag h4 dengan class list-group-item-heading dan tag paragraf <p> dengan class list-group-item-text dan masukkan kan judul di tag h4 dan text paragraf di tag <p>  Berikut syntaxnya :

<a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> Lorem Ipsum</h4> <hr> <p class="list-group-item-text"> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> </a>

1 2 3 4

<a href="#" class="list-group-item">       <h4 class="list-group-item-heading">Lorem Ipsum</h4><hr>       <p class="list-group-item-text">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> </a>

Sidebar 2

sudah terlihat sidebar yang kita buat, untuk menambahkan item di  bawahnya sahabat carikode hanya tinggal meng copy-paste tag link list-group-item serta isi di dalamnya, maka secara otomatis list di bawahnya akan bertambah, Berikut contohnya :

Sidebar 3

Untuk penambahan saya membuat list kategori di bawah list tutorial terbaru, Buatlah tag div baru dengan class col-lg-12 di akhir baris col-lg-12 sebelumnya, Kemudian buatlah tag link dengan class list-group-item active, Berikut syntaxnya :

<div class="col-lg-12"> <a href="#" class="list-group-item active"> Kategori </a> </div>

1 2 3 4 5

<div class="col-lg-12">     <a href="#" class="list-group-item active">         Kategori     </a>                     </div>

Sidebar 4

Selanjutnya kita akan membuat list isi di dalamnya, Buatlah pembuka tag <ul> dengan class list-group dan pembuka tag <li> dengan class list-group-item, Berikut syntaxnya :

<ul class="list-group"> <li class="list-group-item"> Test </li> </ul>

1 2 3 4 5

<ul class="list-group">    <li class="list-group-item">       Test    </li> </ul>

Sidebar 5

Kemudian biatlah tag <span> dengan class badge untuk membuat jumlah file yang ada di dalam sebuah kategori, Berikut syntaxnya :

<ul class="list-group"> <li class="list-group-item"> <span class="badge">14</span> <a href="#">PHP</a> </li> </ul>

1 2 3 4 5 6

<ul class="list-group">       <li class="list-group-item">            <span class="badge">14</span>            <a href="#">PHP</a>       </li> </ul>

Sidebar 6

Sekarang sahabat cari kode hanya tinggal menambahnya saja dengan mengcopy-paste tag <li> dan isinya, Berikut contohnya :

Sidebar 7

Baik, untuk kesempatan kali ini selesai sudah cara membuat sidebar menggunakan bootstrap, Terus stay di carikode.com dan tunggulah tutorila selanjutnya.