#### Bootstrap List Media

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

#### 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

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

#### 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

- Cras justo odio 6
- Dapibus ac facilisis in
- Morbi leo risus 3
- Porta ac consectetur ac 10
- Vestibulum at eros

#### 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

- ##### List-based media object

  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.

- ##### List-based media object

  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.

- ##### List-based media object

  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.

  ##### Media heading

  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.

#### 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

Home Profile Messages

#### 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

##### Media heading

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.

##### Media heading

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.

#### 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

#### Top Alignment

##### Top-aligned media

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.

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.

#### Center Alignment

##### Center-aligned media

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.

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.

#### Bottom Alignment

##### Bottom-aligned media

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.

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.

#### 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

- ##### List-based media object

  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.

- ##### List-based media object

  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.

- ##### List-based media object

  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.

#### 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>