List of items
For having a list of items with an icon on the left side. If this is integrated in body of a card, then add list-group-item-integrated.border-left-0.border-right-0
classes for removing duplicate borders of the list-group-item
elements
Example
Simple list with icons on the left
Example Link 1
Second line of text for item 1
Example Link 2
Second line of text for item 2
Example Link 3
Second line of text for item 3
List integrated inside a card
List inside a card
Example Link 1
Second line of text for item 1
Example Link 2
Second line of text for item 2
Example Link 3
Second line of text for item 3
Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
%h4 Simple list with icons on the left
.row
.col-3
.list-group
.list-group-item
.row
.col-2.pl-2.text-center
%i.fa.fa-cubes.fa-2x.text-info.pt-2{title: 'Icon title 1'}
.col-10.pl-0
%a{href: "http://example.com"} Example Link 1
%p.small.mb-0
Second line of text for item 1
.list-group-item
.row
.col-2.pl-2.text-center
%i.fa.fa-archive.fa-2x.text-warning.pt-2{title: 'Icon title 2'}
.col-10.pl-0
%a{href: "http://example.com"} Example Link 2
%p.small.mb-0
Second line of text for item 2
.list-group-item
.row
.col-2.pl-2.text-center
%i.fa.fa-code-branch.fa-2x.text-success.pt-2{title: 'Icon title 3'}
.col-10.pl-0
%a{href: "http://example.com"} Example Link 3
%p.small.mb-0
Second line of text for item 3
%h4 List integrated inside a card
.row
.col-3
.card
.card-header
List inside a card
.list-group
.list-group-item.list-group-item-integrated.border-left-0.border-right-0
.row
.col-2.pl-2.text-center
%i.fa.fa-cubes.fa-2x.text-info.pt-2{title: 'Icon title 1'}
.col-10.pl-0
%a{href: "http://example.com"} Example Link 1
%p.small.mb-0
Second line of text for item 1
.list-group-item.list-group-item-integrated.border-left-0.border-right-0
.row
.col-2.pl-2.text-center
%i.fa.fa-archive.fa-2x.text-warning.pt-2{title: 'Icon title 2'}
.col-10.pl-0
%a{href: "http://example.com"} Example Link 2
%p.small.mb-0
Second line of text for item 2
.list-group-item.list-group-item-integrated.border-left-0.border-right-0
.row
.col-2.pl-2.text-center
%i.fa.fa-code-branch.fa-2x.text-success.pt-2{title: 'Icon title 3'}
.col-10.pl-0
%a{href: "http://example.com"} Example Link 3
%p.small.mb-0
Second line of text for item 3