Code Here:

									
<ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
</ul>

									
								

Linked Items

Code Here

									
<div class="list-group"> 
	<a href="javascript:void(0)" class="list-group-item active">Cras justo odio</a> 
	<a href="javascript:void(0)" class="list-group-item">Dapibus ac facilisis in</a> 
	<a href="javascript:void(0)" class="list-group-item">Morbi leo
    risus</a> 
	<a href="javascript:void(0)" class="list-group-item">Porta ac
    consectetur ac</a> 
	<a href="javascript:void(0)" class="list-group-item">Vestibulum at eros</a> 
</div>
									
								

With Badges

Code Here

									
<ul class="list-group list-group-full">
    <li class="list-group-item"> Cras justo odio <span
            class="badge badge-info ml-auto">6</span></li>
    <li class="list-group-item"> Dapibus ac facilisis in </li>
    <li class="list-group-item"> Morbi leo risus <span
            class="badge badge-danger ml-auto">3</span></li>
    <li class="list-group-item active"> Porta ac consectetur ac <span
            class="badge badge-success ml-auto">10</span></li>
    <li class="list-group-item"> Vestibulum at eros </li>
</ul>
									
								

Media object

Code Here

									
<ul class="list-unstyled">
    <li class="media">
        <img class="d-flex mr-3" src="../assets/images/users/1.jpg"
            width="60" alt="Generic placeholder image">
        <div class="media-body">
            <h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
            nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
            sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
            viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
            Donec lacinia congue felis in faucibus.
        </div>
    </li>
    <li class="media my-4">
        <img class="d-flex mr-3" src="../assets/images/users/2.jpg"
            width="60" alt="Generic placeholder image">
        <div class="media-body">
            <h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
            nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
            sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
            viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
            Donec lacinia congue felis in faucibus.
        </div>
    </li>
    <li class="media">
        <img class="d-flex mr-3" src="../assets/images/users/3.jpg"
            width="60" alt="Generic placeholder image">
        <div class="media-body">
            <h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
            nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
            sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
            viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
            Donec lacinia congue felis in faucibus.
            <div class="media mt-3">
                <a class="d-flex pr-3" href="javascript:void(0)">
                    <img src="../assets/images/users/4.jpg" width="60"
                        height="60" alt="Generic placeholder image">
                </a>
                <div class="media-body">
                    <h5 class="mt-0">Media heading</h5> Cras sit amet nibh
                    libero, in gravida nulla. Nulla vel metus scelerisque ante
                    sollicitudin. Cras purus odio, vestibulum in vulputate at,
                    tempus viverra turpis. Fusce condimentum nunc ac nisi
                    vulputate fringilla. Donec lacinia congue felis in faucibus.
                </div>
            </div>
        </div>
    </li>
</ul>
									
								

Tabs JavaScript behavior

Code Here

									
<div class="row">
    <div class="col-4">
        <div class="list-group" id="list-tab" role="tablist">
            <a class="list-group-item list-group-item-action active"
                id="list-home-list" data-toggle="list" href="#list-home"
                role="tab" aria-controls="home">Home</a>
            <a class="list-group-item list-group-item-action"
                id="list-profile-list" data-toggle="list" href="#list-profile"
                role="tab" aria-controls="profile">Profile</a>
            <a class="list-group-item list-group-item-action"
                id="list-messages-list" data-toggle="list" href="#list-messages"
                role="tab" aria-controls="messages">Messages</a>
        </div>
    </div>
    <div class="col-8">
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="list-home"
                role="tabpanel" aria-labelledby="list-home-list">
                Irure enim occaecat labore sit qui aliquip reprehenderit amet
                velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia
                magna sit occaecat laboris sunt dolor.
            </div>
            <div class="tab-pane fade" id="list-profile" role="tabpanel"
                aria-labelledby="list-profile-list">
                Irure enim occaecat labore sit qui aliquip reprehenderit amet
                velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia
                magna sit occaecat laboris sunt dolor.
            </div>
            <div class="tab-pane fade" id="list-messages" role="tabpanel"
                aria-labelledby="list-messages-list">
                Irure enim occaecat labore sit qui aliquip reprehenderit amet
                velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia
                magna sit occaecat laboris sunt dolor.
            </div>
        </div>
    </div>
</div>
									
								

Nesting Media

Code Here

									
<div class="media">
    <img class="mr-3 w-25" src="../assets/images/big/img1.jpg"
        alt="Generic placeholder image">
    <div class="media-body">
        <h5 class="mt-0 text-dark">Media heading</h5> Cras sit amet nibh libero, in
        gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus
        odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
        condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
        in faucibus.
        <div class="media mt-3">
            <a class="pr-3 w-25" href="#">
                <img src="../assets/images/big/img1.jpg" class="w-100"
                    alt="Generic placeholder image">
            </a>
            <div class="media-body">
                <h5 class="mt-0 text-dark">Media heading</h5> Cras sit amet nibh libero,
                in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
                Cras purus odio, vestibulum in vulputate at, tempus viverra
                turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                Donec lacinia congue felis in faucibus.
            </div>
        </div>
    </div>
</div>
									
								

Alignment Media

Code Here

									
<h4 class="card-title">Top Alignment</h4>
<div class="media">
    <img class="align-self-start w-25 mr-3"
        src="../assets/images/big/img1.jpg" alt="Generic placeholder image">
    <div class="media-body">
        <h5 class="mt-0">Top-aligned media</h5>
        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
            scelerisque ante sollicitudin. Cras purus odio, vestibulum in
            vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
            vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
        <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu
            leo. Cum sociis natoque penatibus et magnis dis parturient montes,
            nascetur ridiculus mus.</p>
    </div>
</div>
<hr>
<h4 class="card-title">Center Alignment</h4>
<div class="media">
    <img class="align-self-center w-25 mr-3"
        src="../assets/images/big/img1.jpg" alt="Generic placeholder image">
    <div class="media-body">
        <h5 class="mt-0">Center-aligned media</h5>
        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
            scelerisque ante sollicitudin. Cras purus odio, vestibulum in
            vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
            vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
        <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis
            ornare vel eu leo. Cum sociis natoque penatibus et magnis dis
            parturient montes, nascetur ridiculus mus.</p>
    </div>
</div>
<hr>
<h4 class="card-title">Bottom Alignment</h4>
 <div class="media">
    <img class="align-self-end mr-3 w-25" src="../assets/images/big/img1.jpg"
        alt="Generic placeholder image">
    <div class="media-body">
        <h5 class="mt-0">Bottom-aligned media</h5>
        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
            scelerisque ante sollicitudin. Cras purus odio, vestibulum in
            vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
            vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
        <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis
            ornare vel eu leo. Cum sociis natoque penatibus et magnis dis
            parturient montes, nascetur ridiculus mus.</p>
    </div>
</div>
									
								

Media list

Code Here

									
<ul class="list-unstyled">
    <li class="media">
        <img class="mr-3 w-25" src="../assets/images/big/img1.jpg"
            alt="Generic placeholder image">
        <div class="media-body">
            <h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
            nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
            sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
            viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
            Donec lacinia congue felis in faucibus.
        </div>
    </li>
    <li class="media my-4">
        <img class="mr-3 w-25" src="../assets/images/big/img1.jpg"
            alt="Generic placeholder image">
        <div class="media-body">
            <h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
            nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
            sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
            viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
            Donec lacinia congue felis in faucibus.
        </div>
    </li>
    <li class="media">
        <img class="mr-3 w-25" src="../assets/images/big/img1.jpg"
            alt="Generic placeholder image">
        <div class="media-body">
            <h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
            nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
            sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
            viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
            Donec lacinia congue felis in faucibus.
        </div>
    </li>
</ul>