Bootstrap list groups

Suggested Video Tutorials
Part 9 - Bootstrap typography
Part 10 - Bootstrap paragraphs
Part 11 - Bootstrap blockquotes and lists



Bootstrap list groups are useful for displaying simple lists of elements, as well as complex ones with custom content. 



Basic list group : To create a basic list group, create an unordered list. Use .list-group class on the <ul> element and list-group-item class on the <li> element.

<ul class="list-group">

    <li class="list-group-item">India</li>

    <li class="list-group-item">USA</li>

    <li class="list-group-item">UK</li>

</ul>

Output :


List group item with a badge : To create a badge, include a <span> element with .badge class inside the <li> element. 

<ul class="list-group">

    <li class="list-group-item">India</li>

    <li class="list-group-item">USA</li>

    <li class="list-group-item">UK</li>

    <li class="list-group-item">

        Australia

        <span class="badge">New</span>

    </li>

</ul>

Output : Notice the new country "Australia" is displayed with the badge "New"


List group with hyperlinks : To create list group with hyperlinks, use <div> instead of <ul> and <a> instead of <li>

<div class="list-group">

    <a href="http://dell.com" class="list-group-item">Dell</a>

    <a href="http://google.com" class="list-group-item">Google</a>

    <a href="http://microsoft.com" class="list-group-item">Microsoft</a>

</div>

Output : On hover the cursor changes to a hand symbol and the background colour changes to grey. When you click on an item, you will be redirected to the respective URL.


Styling list items : Use contextual classes to style the list items. The following are the contextual classes

<ul class="list-group">

    <li class="list-group-item list-group-item-danger">India</li>

    <li class="list-group-item list-group-item-info">USA</li>

    <li class="list-group-item list-group-item-success">UK</li>

    <li class="list-group-item list-group-item-warning">Australia</li>

</ul>

Highlight and disable list group items : Use .active class to highlight a list-group-item and .disabled class to disable a list item.

<ul class="list-group">

    <li class="list-group-item disabled">Disabled Item</li>

    <li class="list-group-item active">Active Item</li>

    <li class="list-group-item">Other Item 1</li>

    <li class="list-group-item">Other Item 2</li>

</ul>

Output : 


List group custom content : List groups can contain your own custom content. Nearly any HTML can be used. We will use the following 3 classes to create list group with custom 
content.

<div class="list-group">

    <a href="#" class="list-group-item">

        <h4 class="list-group-item-heading">List Group Item 1 Heading</h4>

        <p class="list-group-item-text">List Group Item 1 Text</p>

    </a>

    <a href="#" class="list-group-item">

        <h4 class="list-group-item-heading">List Group Item 2 Heading</h4>

        <p class="list-group-item-text">List Group Item 2 Text</p>

    </a>

    <a href="#" class="list-group-item">

        <h4 class="list-group-item-heading">List Group Item 3 Heading</h4>

        <p class="list-group-item-text">List Group Item 3 Text</p>

    </a>

</div>