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 :

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 :

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 :

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.

Lebak Cyber Tips dan Trik Komputer

Membuat List Menggunakan Bootstrap