List Style dan Listgroup pada CSS dan Bootstrap 4

Cara Membuat List Style dan Listgroup pada Bootstrap 4 – Pada kesempatan kali ini saya akan membahas tentang yang berhubungan lagi dengan bootstrap yaitu list style dan list group. Untuk list style sebenarnya kita cukup hanya menggunakan css saja namun kita akan membuatnya manual. Caranya sangat mudah cukup ikuti saja tutorial dibawah.

Cara Membuat List Style

List style ini bisa kita ubah dan ada banyak macamnya seperti bullet, angka, romawi, huruf besar atau kecil dan masih banyak lagi. Untuk membuat list, sobat bisa menggunakan tag <ul>..</ul> atau tag <ol>…</ol> yang berbeda hanya cssnya saja. Berikut adalah macam-macam dari list style

1. List Style Simbol

Kita bisa membuat simbolnya seperti bulat, ataupun kotak. Contoh penggunaannya adalah sebagai berikut :

<ul style="list-style-type: circle;">
  <li>Circle type 1</li>
  <li>Circle type 2</li>
  <li>Circle type 3</li>
</ul>

<ul style="list-style-type: disc;">
  <li>Disc type 1</li>
  <li>Disc type 2</li>
  <li>Disc type 3</li>
</ul>

<ul style="list-style-type: square;">
  <li>Square type 1</li>
  <li>Square type 2</li>
  <li>Square type 3</li>
</ul>

<ul style="list-style-type: inherit;">
  <li>inherit type 1</li>
  <li>inherit type 2</li>
  <li>inherit type 3</li>
</ul>

<li>Circle type 1</li>

<li>Circle type 2</li>

<li>Circle type 3</li>

</ul>

</ul>

<li>Square type 1</li>

<li>Square type 2</li>

<li>Square type 3</li>

</ul>

<li>inherit type 1</li>

<li>inherit type 2</li>

<li>inherit type 3</li>

</ul>

Hasilnya :

Circle type 1
Circle type 2
Circle type 3

Disc type 1
Disc type 2
Disc type 3

Square type 1
Square type 2
Square type 3

inherit type 1
inherit type 2
inherit type 3

2. List None Style

Jika sobat ingin menggunakan list tapi tanpa ada simbol, angka ataupun huruf maka sobat bisa menambahkan list style none. Contoh penggunaannya adalah sebagai berikut

<ul style="list-style-type: none;">
  <li>None type 1</li>
  <li>None type 2</li>
  <li>None type 3</li>
</ul>

</ul>

Tampilannya :

None type 1
None type 2
None type 3

3. Lower dan Upper Greek

<ul style="list-style-type: lower-greek;">
  <li>Lower-greek type 1</li>
  <li>Lower-greek type 2</li>
  <li>Lower-greek type 3</li>
</ul>

<ul style="list-style-type: upper-greek;">
  <li>Upper-greek type 1</li>
  <li>Upper-greek type 2</li>
  <li>Upper-greek type 3</li>
</ul>

<li>Lower-greek type 1</li>

<li>Lower-greek type 2</li>

<li>Lower-greek type 3</li>

</ul>

<li>Upper-greek type 1</li>

<li>Upper-greek type 2</li>

<li>Upper-greek type 3</li>

</ul>

Hasilnya :

Lower-greek type 1
Lower-greek type 2
Lower-greek type 3

Upper-greek type 1
Upper-greek type 2
Upper-greek type 3

4. Decimal/Angka

Style jenis ini adalah untuk membuat list dengan menggunakan angka, sobat juga bisa menambahkan angka 0 di depan angka. Cara penggunaannya adalah sebagai berikut :

<ul style="list-style-type: decimal;">
  <li>Decimal type 1</li>
  <li>Decimal type 2</li>
  <li>Decimal type 3</li>
</ul>

<ul style="list-style-type: decimal-leading-zero;">
  <li>Decimal-leading-zero type 1</li>
  <li>Decimal-leading-zero type 2</li>
  <li>Decimal-leading-zero type 3</li>
</ul>

<li>Decimal type 1</li>

<li>Decimal type 2</li>

<li>Decimal type 3</li>

</ul>

<li>Decimal-leading-zero type 1</li>

<li>Decimal-leading-zero type 2</li>

<li>Decimal-leading-zero type 3</li>

</ul>

Hasilnya :

Decimal type 1
Decimal type 2
Decimal type 3

Decimal-leading-zero type 1
Decimal-leading-zero type 2
Decimal-leading-zero type 3

5. Lower dan Upper Alpha

List jenis ini adalah list dengan huruf. Untuk lower-alpha maka hurufnya kecil semua dan jika Upper alpha maka berupa list dengan angka besar semua seperti A, B, C, D,… AA, AB…. Cara penggunaannya adalah sebagai berikut

<ul style="list-style-type: lower-alpha;">
  <li>Lower-alpha type 1</li>
  <li>Lower-alpha type 2</li>
  <li>Lower-alpha type 3</li>
</ul>

<ul style="list-style-type: upper-alpha;">
  <li>Upper-alpha type 1</li>
  <li>Upper-alpha type 2</li>
  <li>Upper-alpha type 3</li>
</ul>

<li>Lower-alpha type 1</li>

<li>Lower-alpha type 2</li>

<li>Lower-alpha type 3</li>

</ul>

<li>Upper-alpha type 1</li>

<li>Upper-alpha type 2</li>

<li>Upper-alpha type 3</li>

</ul>

Tampilannya :

Lower-alpha type 1
Lower-alpha type 2
Lower-alpha type 3

Upper-alpha type 1
Upper-alpha type 2
Upper-alpha type 3

6. Lower dan Upper Latin

Ada lagi cara untuk membuat list menggunakan huruf baik huruf besar maupun kecil, yaitu lowel latin dan upper latin. Contoh penggunaannya adalah sebagai berikut

<ul style="list-style-type: lower-latin;">
  <li>Lower-latin type 1</li>
  <li>Lower-latin type 2</li>
  <li>Lower-latin type 3</li>
</ul>

<ul style="list-style-type: upper-latin;">
  <li>Upper-latin type 1</li>
  <li>Upper-latin type 2</li>
  <li>Upper-latin type 3</li>
</ul>

<li>Lower-latin type 1</li>

<li>Lower-latin type 2</li>

<li>Lower-latin type 3</li>

</ul>

<li>Upper-latin type 1</li>

<li>Upper-latin type 2</li>

<li>Upper-latin type 3</li>

</ul>

Hasilnya :

Lower-latin type 1
Lower-latin type 2
Lower-latin type 3

Upper-latin type 1
Upper-latin type 2
Upper-latin type 3

7. Lower dan Upper Roman

Style jenis ini adalah list dengan huruf i atau romawi. Jika sobat ingin menggunakan romawi yang biasa digunakan mala menggunakan Upper Roman karena akan menghasilkan huruf besar semua seperti I, II, III, IV… Sedangkan jika sobat menggunakan huruf kecil semua maka tampilannya akan seperti i, ii, iii, iv… Cara penggunaannya adalah sebagai berikut

<ul style="list-style-type: lower-roman;">
  <li>Lower-roman type 1</li>
  <li>Lower-roman type 2</li>
  <li>Lower-roman type 3</li>
</ul>

<ul style="list-style-type: upper-roman;">
  <li>Upper-roman type 1</li>
  <li>Upper-roman type 2</li>
  <li>Upper-roman type 3</li>
</ul>

<li>Lower-roman type 1</li>

<li>Lower-roman type 2</li>

<li>Lower-roman type 3</li>

</ul>

<li>Upper-roman type 1</li>

<li>Upper-roman type 2</li>

<li>Upper-roman type 3</li>

</ul>

Tampilannya :

Lower-roman type 1
Lower-roman type 2
Lower-roman type 3

Upper-roman type 1
Upper-roman type 2
Upper-roman type 3

8. List Style Huruf Asing

Style jenis ini sebenarnya jarang atau maah tidak digunakan khususnya di Indonesia, namun siapa tahu ada yang butuh atau untuk pengetahuan saja jadi saya berikan sekalian. contoh penggunaannya adalah sebagai berikut

<ul style="list-style-type: georgian;">
  <li>Georgian type 1</li>
  <li>Georgian type 2</li>
  <li>Georgian type 3</li>
</ul>

<ul style="list-style-type: armenian;">
  <li>Armenian type 1</li>
  <li>Armenian type 2</li>
  <li>Armenian type 3</li>
</ul>

<ul style="list-style-type: cjk-ideographic;">
  <li>Cjk-ideographic type 1</li>
  <li>Cjk-ideographic type 2</li>
  <li>Cjk-ideographic type 3</li>
</ul>

<ul style="list-style-type: hebrew;">
  <li>Hebrew type 1</li>
  <li>Hebrew type 2</li>
  <li>Hebrew type 3</li>
</ul>

<ul style="list-style-type: hiragana;">
  <li>Hiragana type 1</li>
  <li>Hiragana type 2</li>
  <li>Hiragana type 3</li>
</ul>

<ul style="list-style-type: hiragana-iroha;">
  <li>Hiragana-iroha type 1</li>
  <li>Hiragana-iroha type 2</li>
  <li>Hiragana-iroha type 3</li>
</ul>

<ul style="list-style-type: katakana;">
  <li>Katakana type 1</li>
  <li>Katakana type 2</li>
  <li>Katakana type 3</li>
</ul>

<ul style="list-style-type: katakana-iroha;">
  <li>Katakana-iroha type 1</li>
  <li>Katakana-iroha type 2</li>
  <li>Katakana-iroha type 3</li>
</ul>

<li>Georgian type 1</li>

<li>Georgian type 2</li>

<li>Georgian type 3</li>

</ul>

<li>Armenian type 1</li>

<li>Armenian type 2</li>

<li>Armenian type 3</li>

</ul>

<li>Cjk-ideographic type 1</li>

<li>Cjk-ideographic type 2</li>

<li>Cjk-ideographic type 3</li>

</ul>

<li>Hebrew type 1</li>

<li>Hebrew type 2</li>

<li>Hebrew type 3</li>

</ul>

<li>Hiragana type 1</li>

<li>Hiragana type 2</li>

<li>Hiragana type 3</li>

</ul>

<li>Hiragana-iroha type 1</li>

<li>Hiragana-iroha type 2</li>

<li>Hiragana-iroha type 3</li>

</ul>

<li>Katakana type 1</li>

<li>Katakana type 2</li>

<li>Katakana type 3</li>

</ul>

<li>Katakana-iroha type 1</li>

<li>Katakana-iroha type 2</li>

<li>Katakana-iroha type 3</li>

</ul>

Hasilnya :

Georgian type 1
Georgian type 2
Georgian type 3

Armenian type 1
Armenian type 2
Armenian type 3

Cjk-ideographic type 1
Cjk-ideographic type 2
Cjk-ideographic type 3

Hebrew type 1
Hebrew type 2
Hebrew type 3

Hiragana type 1
Hiragana type 2
Hiragana type 3

Hiragana-iroha type 1
Hiragana-iroha type 2
Hiragana-iroha type 3

Katakana type 1
Katakana type 2
Katakana type 3

Katakana-iroha type 1
Katakana-iroha type 2
Katakana-iroha type 3

Cara Membuat List Group dengan Bootstrap 4

Ada banyak jenis dari list group pada bootstrap. Sobat juga bisa menggabungkan dengan elemen bootstrap lainnya tentunya untuk menggunakan listrgoup dari bootstrap ini kita perlu memasukkan terlebih dahulu librari bootstrapnya seperti dibawah dan masukkan pada tag <head>…</head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Karena ini untuk keperluan demo maka saya menggunakan css dan js online namun jika sobat ingin menggunakannya untuk keperluan development maka sobat perlu mendownloadnya terlebih dahulu di website resminya atau sobat bisa mendownloadnya bersama project ini diakhir postingan. Berikut macam-macam listgroup

1. List Group Standar

Ini adalah list group biasa yang bisa digunakan. Cara penggunaannya adalah sebagai berikut

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

<li class="list-group-item">Cras justo odio</li>

<li class="list-group-item">Dapibus ac facilisis in</li>

<li class="list-group-item">Morbi leo risus</li>

<li class="list-group-item">Porta ac consectetur ac</li>

<li class="list-group-item">Vestibulum at eros</li>

</ul>

Hasilnya :

2. List Group dengan Active dan Disabled

Pada list group, kita juga bisa menambahkan elemen active dan disabled, jika kita menambahkan class active tantunya akan menciptakan list yang berbeda sendiri dari lainnya dan jika kita menambahkan class disabled maka list tersebut tidak aktif. Cara penggunaannya adalah sebagai berikut

<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item disabled">Vestibulum at eros</li>
</ul>

<li class="list-group-item active">Cras justo odio</li>

<li class="list-group-item">Dapibus ac facilisis in</li>

<li class="list-group-item">Morbi leo risus</li>

<li class="list-group-item">Porta ac consectetur ac</li>

<li class="list-group-item disabled">Vestibulum at eros</li>

</ul>

Tampilannya :

3. List Group dengan Link

List group ini adalah untuk merubah list menjadi bisa diklik dan tentunya jika focus maka akan merubah pointer mouse menjadi icon tangan. Cara penggunaannya adalah sebagai berikut

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>

Cras justo odio

</a>

<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>

<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>

<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>

<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>

</div>

Hasilnya :

4. List Group dengan Button

Selain menggunakan link, kita juga bisa menggunakan button untuk merubah pointernya dan tentunya untuk bisa diklik. Cara penggunaannya adalah sebagai berikut

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">
  	Dapibus ac facilisis in
  </button>
  <button type="button" class="list-group-item list-group-item-action">
  	Morbi leo risus
  </button>
  <button type="button" class="list-group-item list-group-item-action">
  	Porta ac consectetur ac
  </button>
  <button type="button" class="list-group-item list-group-item-action" disabled>
  	Vestibulum at eros
  </button>
</div>

Cras justo odio

</button>

Dapibus ac facilisis in

</button>

Morbi leo risus

</button>

Porta ac consectetur ac

</button>

Vestibulum at eros

</button>

</div>

Hasilnya :

5. List Group Flush

<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

<li class="list-group-item">Cras justo odio</li>

<li class="list-group-item">Dapibus ac facilisis in</li>

<li class="list-group-item">Morbi leo risus</li>

<li class="list-group-item">Porta ac consectetur ac</li>

<li class="list-group-item">Vestibulum at eros</li>

</ul>

Hasilnya :

6. List Group Horisontal

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

<li class="list-group-item">Cras justo odio</li>

<li class="list-group-item">Dapibus ac facilisis in</li>

<li class="list-group-item">Morbi leo risus</li>

</ul>

Hasilnya :

7. List Group dengan warna

Seperti jika kita membuat button, teks, dan masih banyak lagi kebanyakan itu kita bisa memberikan warna sesuai dengan bawaan bootstrap. Cara memberikan warna pada list group adalah sebagai berikut

<div class="row">
	<div class="col-sm-6">
		<ul class="list-group">
		  <li class="list-group-item">Dapibus ac facilisis in</li>
		  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
		  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
		  <li class="list-group-item list-group-item-success">A simple success list group item</li>
		  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
		  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
		  <li class="list-group-item list-group-item-info">A simple info list group item</li>
		  <li class="list-group-item list-group-item-light">A simple light list group item</li>
		  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
		</ul>
	</div>

	<div class="col-sm-6">
		<div class="list-group">
		  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
		  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
		  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
		  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
		  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
		  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
		  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
		  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
		  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
		</div>
	</div>
</div>

<li class="list-group-item">Dapibus ac facilisis in</li>

<li class="list-group-item list-group-item-primary">A simple primary list group item</li>

<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>

<li class="list-group-item list-group-item-success">A simple success list group item</li>

<li class="list-group-item list-group-item-danger">A simple danger list group item</li>

<li class="list-group-item list-group-item-warning">A simple warning list group item</li>

<li class="list-group-item list-group-item-info">A simple info list group item</li>

<li class="list-group-item list-group-item-light">A simple light list group item</li>

<li class="list-group-item list-group-item-dark">A simple dark list group item</li>

</ul>

</div>

<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>

</div>

Hasilnya :

8. List Group dengan Badges

List group ini juga bisa kita gabungkan dengan badges. Jika kita menggunakan untuk menu pada admin panel dan ingin memberikan jumlah pemberitahuan pada setiap menu maka sobat perllu listgroup ini. Cara penggunaannya adalah sebagai berikut

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

Cras justo odio

</li>

Dapibus ac facilisis in

</li>

Morbi leo risus

</li>

</ul>

Hasilnya :

9. List Group dengan Konten

Listgroup ini adalah list group dengan isi yang banyak karena kita bisa memberikan beberapa elemen seperti teks, heading, paragraph dll. Contoh penggunaannya adalah sebagai berikut

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

<h5 class="mb-1">List group item heading</h5>

</div>

<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>

<small>Donec id elit non mi porta.</small>

</a>

<h5 class="mb-1">List group item heading</h5>

</div>

<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>

<small class="text-muted">Donec id elit non mi porta.</small>

</a>

<h5 class="mb-1">List group item heading</h5>

</div>

<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>

<small class="text-muted">Donec id elit non mi porta.</small>

</a>

</div>

Hasilnya :

10. List Group dengan Javascript Horizontal

Ini sebenarnya merupakan tablist, jadi kita memerlukan javascript untuk mengaktifkan tabnya jika diklik

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
    	<div class="tab-pane fade show text-justify active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
      		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  		</div>
    	<div class="tab-pane text-justify fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
			Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
		</div>
    	<div class="tab-pane text-justify fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
      		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  		</div>
    	<div class="tab-pane text-justify fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
    		Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
    	</div>
    </div>
  </div>
</div>

<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>

<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>

<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

</div>

</div>

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

</div>

Hasilnya :

11. List Group dengan Javascript Vertical

Seperti membuat tab secara horizontal, kita juga bisa menggunakan tablist ini secara vertical. Contoh penggunaannya adalah sebagai berikut

<!-- List group -->
<div class="list-group list-group-horizontal" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<!-- Tab panes -->
<div class="tab-content">
	<div class="tab-pane text-justify active" id="home" role="tabpanel">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
  	<div class="tab-pane text-justify" id="profile" role="tabpanel">
	  	Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
	</div>
	<div class="tab-pane text-justify" id="messages" role="tabpanel">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
  	<div class="tab-pane text-justify" id="settings" role="tabpanel">
  		Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
  	</div>
</div>

<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>

<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>

<a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>

</div>

</div>

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

</div>

</div>

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

</div>

Hasilnya :

12. List dengan Breadcrumb

Dengan list ini kita juga bisa membuat breadcrumb, cara penggunaannya adalah sebagai berikut

<nav aria-label="breadcrumb">
  <ul class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ul>
</nav>

<nav aria-label="breadcrumb">
  <ul class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ul>
</nav>

<nav aria-label="breadcrumb">
  <ul class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ul>
</nav>

</ul>

</nav>

<li class="breadcrumb-item active" aria-current="page">Library</li>

</ul>

</nav>

<li class="breadcrumb-item"><a href="#">Library</a></li>

</ul>

</nav>

Hasilnya :

Sekian postingan saya tentang List Style dan Listgroup pada CSS dan Bootstrap 4. Jika ada kesalahan saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan komentar pada koom komentar yang sudah disediakan.

Artikel Tentang Bootstrap Lainnya :

Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah

Macam-macam Form Input pada HTML dan Bootstrap

Cara Membuat SweetAlert dan Macam-Macamnya pada PHP

Membuat Bootstrap Modal dan Animasinya pada PHP

Membuat Badges Menggunakan Bootstrap 4

Membuat Alert pada HTML menggunakan Bootstrap 4

Mengenal Bootstrap Typography pada HTML dan Bootstrap 4

Menggunakan Tooltip pada HTML dan Bootstrap 4

Membuat Card Menu pada HTML Dengan Bootstrap 4

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..