Wednesday , December 2 2020
Home » Bootstrap » Membuat List Menggunakan Bootstrap

Membuat List Menggunakan Bootstrap

Membuat List Menggunakan Bootstrap

lebakcyber.net – Membuat list menggunakan Bootstrap. Oke jadi pada kesempatan kali ini kita akan mempelajari tentang bagaimana cara untuk membuat sebuah list dengan memakai Bootstrap.

Pada Bootstrap, untuk membuat sebuah list caranya sangatlah gampang, kita hanya perlu menambahkan class “list-group” didalam element untuk pembuka list, misalnya kita menambahkan classnya pada tag <ul> didalamnya seperti dibawah ini :

<ul class = "list-group">

Sekarang langsung saja kita praktekan ya, silahkan buat sebuah file index.html lalu masukan perintah seperti dibawah ini :

Advertisements

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Bootstrap - lebakcyber.net</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>		
    <div class="container">
        <h1>Cara Membuat List Dengan Bootstrap</h1> 
        <ul class="list-group">
            <li class="list-group-item">Nirvana</a></li>
            <li class="list-group-item">Metallica</a></li>
            <li class="list-group-item">Slipknot</a></li>
            <li class="list-group-item">Slank</a></li>			
            <li class="list-group-item">BIP</a></li>
            <li class="list-group-item">Three Days Grace</a></li>	
            <li class="list-group-item">Five FInger Death Punch</a></li>				
        </ul>
    </div>
</div>
</body>
</html>

Nanti hasilnya akan seperti pada gambar dibawah ini :

Advertisements

Membuat list menggunakan bootstrap

Selain itu juga kita dapat memberikan warna untuk setiap list bootsrap yang kita buat diatas. Class pada Bootstrap yang bisa digunakan untuk memberikan warna diantaranya seperti dibawah ini :

  • .list-group-item-info = Digunakan untuk memberikan warna biru pada list yang dibuat.
  • .list-group-item-warning = Digunakan untuk memberikan warna kuning pada list yang dibuat.
  • .list-group-item-danger = Digunakan untuk memberikan warna merah pada list yang dibuat.
  • .list-group-item-success = Digunakan untuk memberikan warna hijau pada list yang dibuat.

Sekarang kita coba praktekan lagi ya, silahkan masukan perintah dibawah ini beserta class bootstrap untuk memberikan warnanya :

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Bootstrap - lebakcyber.net</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>		
    <div class="container">
        <h1>Cara Membuat List Dengan Bootstrap</h1> 
        <ul class="list-group">
        <li class="list-group-item list-group-item-info">Nirvana</a></li>
            <li class="list-group-item list-group-item-warning">Metallica</a></li>
            <li class="list-group-item list-group-item-success">Slipknot</a></li>
            <li class="list-group-item list-group-item-danger">Slank</a></li>				
        </ul>
    </div>
</div>
</body>
</html>

Nanti hasilnya akan seperti gambar dibawah ini :

Membuat list menggunakan bootstrap

Oke jadi seperti itulah bagaimana cara kita agar dapat mempercantik tampilan dari list yang dibuat dengan memakai Bootstrap, hasilnya terlihat lebih menarik bukan.

Semoga tutorial sederhana Bootstrap ini dapat bermanfaat bagi kalian yang sedang belajar mengenai Bootstrap dan sampai jumpa pada tutorial belajar Bootstrap selanjutnya ya.

About Firdan Ardiansyah

Admin di lebakcyber.net Untuk berhubungan dengan saya, silahkan kirim email ke : firdan@lebakcyber.net

Check Also

membuat navigation bar menggunakan bootstrap

Navigation Bar Menggunakan Bootstrap

Navigation Bar Menggunakan Bootstrap lebakcyber.net – Membuat Navigation bar menggunakan bootstrap. Pada kesempatan kali ini …

Leave a Reply

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