Membuat List Dengan Bootstrap
Untuk membuat list dengan bootstrap caranya sangat mudah. tambahkan class “list-group” pada element pembuka list. contohnya pada tag <ul> pembuka.
kemudian tambahkan class “list-group-item” pada tiap-tiap tag <li> pembuka untuk menandakan bahwa list tersebut merupakan anak dari list.
< li class ="list-group-item" >
berikut ini cara membuat list dengan bootstrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< !DOCTYPE html >
< html >
< head >
< title > Bootstrap Part 9 : Membuat list dengan bootstrap < /title >
< link rel ="stylesheet" type ="text/css" href ="css/bootstrap.css" >
<script type ="text/javascript" src ="js/jquery.js" > </script>
<script type ="text/javascript" src ="js/bootstrap.js" > </script>
< /head >
< body >
< div class ="container" >
< h1 > Membuat list dengan bootstrap | www . malasngoding . com < /h1 >
< ul class ="list-group" >
< li class ="list-group-item" > < a href ="#" > Baju < /a > < /li >
< li class ="list-group-item" > < a href ="#" > Celana < /a > < /li >
< li class ="list-group-item" > < a href ="#" > Jaket < /a > < /li >
< li class ="list-group-item" > < a href ="#" > Sepatu < /a > < /li >
< li class ="list-group-item" > < a href ="#" > Sendal < /a > < /li >
< /ul >
< /div >
< /div >
< /body >
< /html >
membuat list dengan bootstrap
anda juga bisa membuat penandaan dengan warna pada list bootstrap di atas. caranya anda bisa menambahkan class berikut
.list-group-item-success
untuk memberi warna hijau pada list
.list-group-item-info
untuk memberi warna biru pada list
.list-group-item-warning
untuk memberi warna kuning pada list
.list-group-item-danger
untuk memberi warna merah pada list
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< !DOCTYPE html >
< html >
< head >
< title > Bootstrap Part 9 : Membuat list dengan bootstrap < /title >
< link rel ="stylesheet" type ="text/css" href ="css/bootstrap.css" >
<script type ="text/javascript" src ="js/jquery.js" > </script>
<script type ="text/javascript" src ="js/bootstrap.js" > </script>
< /head >
< body >
< div class ="container" >
< h1 > Membuat list dengan bootstrap | www . malasngoding . com < /h1 >
< ul class ="list-group" >
< li class ="list-group-item list-group-item-success" > < a href ="#" > Baju < /a > < /li >
< li class ="list-group-item list-group-item-warning" > < a href ="#" > Celana < /a > < /li >
< li class ="list-group-item list-group-item-info" > < a href ="#" > Jaket < /a > < /li >
< li class ="list-group-item list-group-item-danger" > < a href ="#" > Sepatu < /a > < /li >
< li class ="list-group-item" > < a href ="#" > Sendal < /a > < /li >
< /ul >
< /div >
< /div >
< /body >
< /html >
cara membuat list berwarna bootstrap
Membuat list dengan badge bootstrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< !DOCTYPE html >
< html >
< head >
< title > Bootstrap Part 9 : Membuat list dengan bootstrap < /title >
< link rel ="stylesheet" type ="text/css" href ="css/bootstrap.css" >
<script type ="text/javascript" src ="js/jquery.js" > </script>
<script type ="text/javascript" src ="js/bootstrap.js" > </script>
< /head >
< body >
< div class ="container" >
< h1 > Membuat list dengan bootstrap | www . malasngoding . com < /h1 >
< ul class ="list-group" >
< li class ="list-group-item list-group-item-success" > < a href ="#" > < span class ="badge pull-right" > 12 < /span > Baju < /a > < /li >
< li class ="list-group-item list-group-item-warning" > < a href ="#" > < span class ="badge pull-right" > 2 < /span > Celana < /a > < /li >
< li class ="list-group-item list-group-item-info" > < a href ="#" > < span class ="badge pull-right" > 90 < /span > Jaket < /a > < /li >
< li class ="list-group-item list-group-item-danger" > < span class ="badge pull-right" > 78 < /span > < a href ="#" > Sepatu < /a > < /li >
< li class ="list-group-item" > < a href ="#" > < span class ="badge pull-right" > 16 < /span > Sendal < /a > < /li >
< /ul >
< /div >
< /div >
< /body >
< /html >
membuat list badge bootstrap
See the Pen LGyReB by Malas Ngoding (@malasngoding ) on CodePen .0
Sekian tutorial bootstrap part 9 : membuat list dengan bootstrap .
Tutorial Bootstrap Dasar Lainnya
Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap
Diki Alfarabi Hadi
Coding enthusiast.
Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.