Bootstrap List Group

Basic list group is an unordered list with list items.

Basic List Groups

Code Structure:
<div class="container">
    <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>
    </ul>
</div>

List Group with Badges

Code Structure:
<div class="container">
    <ul class="list-group">
        <li class="list-group-item"><span class="badge">10</span>First Item</li>
        <li class="list-group-item"><span class="badge">15</span>Second Item</li>
        <li class="list-group-item"><span class="badge">5</span>Third Item</li>
    </ul>
</div>

List Group with Linked Item

Code Structure:
<div class="container">
    <div class="list-group">
        <a href="#" class="list-group-item">First Item</a>
        <a href="#" class="list-group-item">Second Item</a>
        <a href="#" class="list-group-item">Third Item</a>
    </div>
</div>

List Group with Active State

Code Structure:
<div class="container">
    <div class="list-group">
        <a href="#" class="list-group-item active">First Item</a>
        <a href="#" class="list-group-item">Second Item</a>
        <a href="#" class="list-group-item">Third Item</a>
    </div>
</div>

List Group with Disabled State

Code Structure:
<div class="container">
    <div class="list-group">
        <a href="#" class="list-group-item disabled">First Item</a>
        <a href="#" class="list-group-item">Second Item</a>
        <a href="#" class="list-group-item">Third Item</a>
    </div>
</div>

List Group with Contextual Classes

Code Structure:
<div class="container">
    <ul class="list-group">
        <li class="list-group-item list-group-item-success">First Item</li>
        <li class="list-group-item list-group-item-info">Second Item</li>
        <li class="list-group-item list-group-item-warning">Third Item</li>
        <li class="list-group-item list-group-item-danger">Four Item</li>
    </ul>
</div>

List Group with Custom Content

Code Structure:
<div class="container">
    <div class="list-group">
        <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">List Group Item Heading</h4>
            <p class="list-group-item-text">List Group Item Text</p>
        </a>
        <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">List Group Item Heading</h4>
            <p class="list-group-item-text">List Group Item Text</p>
        </a>
        <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">List Group Item Heading</h4>
            <p class="list-group-item-text">List Group Item Text</p>
        </a>
    </div>
</div>

Share this

Related Posts