Cara Membuat List Group Menggunakan Bootstrap

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Membuat List Group Menggunakan Bootstrap.

Terkadang teman-teman ingin menambahkan suatu menu pilihan di dalam suatu website misalkan memilih modul pembelajaran. dengan framework bootstrap kita tidak usah susah-susah lagi dalam membuat suatu menu pilihan. dengan class list-group teman-teman sudah bisa membuat suatu item untuk di pilih.

Sekarang saya akan mencoba membuattutorial singkatnya,Â tentangÂ Cara Membuat List Group Menggunakan Bootstrap:

â€“ Pertama teman-teman download framework bootstrapnya dulu.

â€“ Kedua buka text editor teman-teman lalu buka file bootstrap yang telah kita download dan buat file index.html dengan cara mengcopy default html yang sudah ada di website bootstrap, janganÂ lupa save di dalam folder bootstrap teman-teman.

â€“ Ketiga kita buat list-groupnya. Berikut kode html-nya sebagai contoh:

<br>
    <div class="container">
      <div class="row">
      <h1>Membuat List Group</h1>
      <ul class="list-group list-unstyled">
        <li><a href="#" class="list-group-item active">
          Dumetschool
        </a></li>
        <li><a class="list-group-item" href="#">Web Master</a></li>
        <li><a class="list-group-item" href="#">Web Design</a></li>
        <li><a class="list-group-item" href="#">Graphic Design</a></li>
        <li><a class="list-group-item" href="#">Web Programming</a></li>
      </ul>
      </div>
      
    </div>

Setelah di jalankan di browser akan menjadi seperti ini:

â€“ Ke-empat kita buat custom.css nya dan save di folder css bootstrap teman-teman untuk mempercantik tampilannya sedikit. Berikut custom.css nya:

.list-group > li {
  margin-bottom: -1px;
}

li > .list-group-item:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

li > .list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

li:last-child > .list-group-item {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

li:first-child > .list-group-item {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

Jangan lupa untuk menghubungkan css custom yang telah kita buat dengan html dengan mengetikan kode di bawah:

<link href="css/custom.css" rel="stylesheet">

coba refresh browser teman-teman, maka tampilannya akan menjadi seperti ini:

Bagaimana teman-teman cukup mudahkan Membuat List Group Menggunakan Bootstrap.

Sekian artikel saya hari ini tentang Cara Membuat List Group Menggunakan Bootstrap.

Sehat selalu ya teman-teman, selamat mencoba.

Cara Membuat List Group Menggunakan Bootstrap

Kategori