Bootstrap List Group

In bootstrap the list group is used to create an unordered list of different types of components. The list group is used to add customized items or contents. A list group can be created by using the .list-group class in <ul> tag. Then use .list-group-item with <li> tag.

Consider the following example in which we have created list group:

CODE:

<!DOCTYPE html>

<html>

<head>

<title> Bootstrap Example</title>

<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<script src=”/scripts/jquery.min.js”></script>

<script src=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<ul class = “list-group”>

<li class = “list-group-item”>First Item</li>

<li class = “list-group-item”>Second Item</li>

<li class = “list-group-item”>Third Item</li>

<li class = “list-group-item”>Fourth Item</li>

</ul>

</body>

</html>

The above code will generate the following result:

OUTPUT:

First Item

Adding Badges to list groups:

Badges can be added to the list group item by using the <span class = “badge”> with the <li> tag.

Consider the following example in which we have added badges to the list group:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = “/ bootstrap/ css / bootstrap. min. css ” rel = “stylesheet” >

< script src = ” / scripts / jquery. min. js ” ></ script >

< script src = “/ bootstrap / js / bootstrap. min. js ” ></ script >

</ head>

<body>

<ul class = “list-group”>

<li class = “list-group-item”>

<span class = “badge”>New</span>

First Item</li>

<li class = “list-group-item”>Second Item</li>

<li class = “list-group-item”>Third Item</li>

<li class = “list-group-item”>

<span class = “badge”>New</span>

Fourth Item

</li>

<li class = “list-group-item”>

<span class = “badge”>New</span>

Fifth Item

</li>

</ul>

</body>

</html>

The above code will generate the following result:

OUTPUT:

following result

Linking List Group Items:

In bootstrap the list group can be linked by using the <a> tag instead of using the <li> tag. And instead of using the <ul> tag we are going to use <div> tag. In this way we will have links on list group items.

Consider the following example in which we have done this:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” / bootstrap / css / bootstrap. min. css ” rel = “stylesheet” >

< script src = ” / scripts / jquery. min. js ” ></ script >

< script src = ” / bootstrap / js / bootstrap. min. js ” ></ script >

</ head >

< body >

< a href = “#” class = “list- group- item” >

First Item

</ a >

< a href = “#” class = “list- group- item” > Second Item < /a >

< a href = “#” class = “list- group- item active” > Third Item </ a >

< a href = “#” class = “list- group- item” > Fourth Item < /a >

< a href = “#” class = “list- group- item” > Fifth Item < /a >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

third item

Add Custom Content to List Group:

Any customized content, it may be an html document, can be added to the list group in bootstrap.

Consider the following example:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” / bootstrap / css / bootstrap. min. css ” rel = “stylesheet” >

< script src = ” / scripts / jquery. min. js ” ></ script >

< script src = ” / bootstrap / js / bootstrap. min. js ” ></ script >

</ head >

< body >

< div class = “list- group” >

< a href = “#” class = “list- group- item” >

< h2 class = “list- group- item- heading” >

Customized Content in List Group

</ h2 >

< /a >

< a href = “#” class = “list- group- item active” >

< h4 class = “list- group- item- heading” >

List Group Item (First)

</ h4 >

< p class = “list- group- item- text” >

Text in List Group Item

< /p >

</ a >

< a href = “#” class = “list- group- item” >

< h4 class = “list- group- item- heading” >

List Group Item (Second)

< /h4 >

< p class = “list- group- item- text” >

Text in List Group Item

< /p >

</ a >

< a href = “#” class = “list- group- item” >

< h4 class = “list- group- item- heading” >

List Group Item (Third)

< /h4 >

< p > Text in List Group Item < /p >

</ a >

< a href = “#” class=”list- group- item” >

< h4 class = “list- group- item- heading” >

List Group Item (Fourth)

</ h4 >

< p class = “list- group- item- text” >

Text in List Group Item

</ p >

< /a >

< a href = “#” class = “list- group- item” >

< h4 class = “list- group- item- heading” >

List Group Item (Fifth)

< /h4 >

< p class = “list- group- item- text” >

Text in List Group Item

</ p >

< /a >

</ div >

</ body >

</ html >

The above example will generate the following result:

OUTPUT:

generate the following result