bs4 beta media user list

This bootstrap snippet called "bs4 beta media user list" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: list,media

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<br>
<br>
<br>
<div class="col-md-8">
    <div class="card b-1 hover-shadow mb-20">
        <div class="media card-body">
            <div class="media-left pr-12">
                <img class="avatar avatar-xl no-radius" src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="...">
            </div>
            <div class="media-body">
                <div class="mb-2">
                    <span class="fs-20 pr-16">Hossein Shams</span>
                </div>
                <small class="fs-16 fw-300 ls-1">Front-end developer</small>
            </div>
            <div class="media-right text-right d-none d-md-block">
                <p class="fs-14 text-fade mb-12"><i class="fa fa-map-marker pr-1"></i> Menlo Park, CA</p>
                <span class="text-fade"><i class="fa fa-money pr-1"></i> $60 per hour</span>
            </div>
        </div>
        <footer class="card-footer flexbox align-items-center">
            <div>
                <strong>Applied on:</strong>
                <span>21 Jan, 2017</span>
            </div>
            <div class="card-hover-show">
                <a class="btn btn-xs fs-10 btn-bold btn-info" href="#">Download CV</a>
                <a class="btn btn-xs fs-10 btn-bold btn-primary" href="#" data-toggle="modal" data-target="#modal-contact">Contact</a>
                <a class="btn btn-xs fs-10 btn-bold btn-warning" href="#">Delete</a>
            </div>
        </footer>
    </div>

    <div class="card b-1 hover-shadow mb-20">
        <div class="media card-body">
            <div class="media-left pr-12">
                <img class="avatar avatar-xl no-radius" src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="...">
            </div>
            <div class="media-body">
                <div class="mb-2">
                    <span class="fs-20 pr-16">Maryam Amiri</span>
                </div>
                <small class="fs-16 fw-300 ls-1">Designer</small>
            </div>
            <div class="media-right text-right d-none d-md-block">
                <p class="fs-14 text-fade mb-12"><i class="fa fa-map-marker pr-1"></i> Fairfield, IA</p>
                <span class="text-fade"><i class="fa fa-money pr-1"></i> $45 per hour</span>
            </div>
        </div>

        <footer class="card-footer flexbox align-items-center">
            <div>
                <strong>Applied on:</strong>
                <span>17 Jan, 2017</span>
            </div>
            <div class="card-hover-show">
                <a class="btn btn-xs fs-10 btn-bold btn-info" href="#">Download CV</a>
                <a class="btn btn-xs fs-10 btn-bold btn-primary" href="#" data-toggle="modal" data-target="#modal-contact">Contact</a>
                <a class="btn btn-xs fs-10 btn-bold btn-warning" href="#">Delete</a>
            </div>
        </footer>
    </div>

    <div class="card b-1 hover-shadow mb-20">
        <div class="media card-body">
            <div class="media-left pr-12">
                <img class="avatar avatar-xl no-radius" src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="...">
            </div>
            <div class="media-body">
                <div class="mb-2">
                    <span class="fs-20 pr-16">Frank Camly</span>
                </div>
                <small class="fs-16 fw-300 ls-1">Front end developer</small>
            </div>
            <div class="media-right text-right d-none d-md-block">
                <p class="fs-14 text-fade mb-12"><i class="fa fa-map-marker pr-1"></i> Seattle, WA</p>
                <span class="text-fade"><i class="fa fa-money pr-1"></i> $40 per hour</span>
            </div>
        </div>

        <footer class="card-footer flexbox align-items-center">
            <div>
                <strong>Applied on:</strong>
                <span>15 Jan, 2017</span>
            </div>
            <div class="card-hover-show">
                <a class="btn btn-xs fs-10 btn-bold btn-info" href="#">Download CV</a>
                <a class="btn btn-xs fs-10 btn-bold btn-primary" href="#" data-toggle="modal" data-target="#modal-contact">Contact</a>
                <a class="btn btn-xs fs-10 btn-bold btn-warning" href="#">Delete</a>
            </div>
        </footer>
    </div>

    <div class="card b-1 hover-shadow mb-20">
        <div class="media card-body">
            <div class="media-left pr-12">
                <img class="avatar avatar-xl no-radius" src="http://bootdey.com/img/Content/avatar/avatar4.png" alt="...">
            </div>
            <div class="media-body">
                <div class="mb-2">
                    <span class="fs-20 pr-16">Tim Hank</span>
                </div>
                <small class="fs-16 fw-300 ls-1">Web developer</small>
            </div>
            <div class="media-right text-right d-none d-md-block">
                <p class="fs-14 text-fade mb-12"><i class="fa fa-map-marker pr-1"></i> Fremont, CA</p>
                <span class="text-fade"><i class="fa fa-money pr-1"></i> $55 per hour</span>
            </div>
        </div>

        <footer class="card-footer flexbox align-items-center">
            <div>
                <strong>Applied on:</strong>
                <span>11 Jan, 2017</span>
            </div>
            <div class="card-hover-show">
                <a class="btn btn-xs fs-10 btn-bold btn-info" href="#">Download CV</a>
                <a class="btn btn-xs fs-10 btn-bold btn-primary" href="#" data-toggle="modal" data-target="#modal-contact">Contact</a>
                <a class="btn btn-xs fs-10 btn-bold btn-warning" href="#">Delete</a>
            </div>
        </footer>
    </div>

    <nav>
        <ul class="pagination justify-content-center">
            <li class="page-item active">
                <a class="page-link" href="#">1</a>
            </li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">4</a></li>
            <li class="page-item"><a class="page-link" href="#">5</a></li>
        </ul>
    </nav>
    <br>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{
    background:#FCFCFC;    
}
.pr-12 {
    padding-right: 12px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.b-1 {
    border: 1px solid #ebebeb !important;
}

.card {
    border: 0;
    border-radius: 0;
    margin-bottom: 30px;
    -webkit-transition: .5s;
    transition: .5s;
}

.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.media {
    padding: 16px 12px;
    -webkit-transition: background-color .2s linear;
    transition: background-color .2s linear;
}

.media {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
}

.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.media .avatar {
    flex-shrink: 0;
}

.no-radius {
    border-radius: 0 !important;
}

.avatar-xl {
    width: 64px;
    height: 64px;
    line-height: 64px;
    font-size: 1.25rem;
}

.avatar {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 100%;
    background-color: #f5f6f7;
    color: #8b95a5;
    text-transform: uppercase;
}

img {
    max-width: 100%;
}

img {
    vertical-align: middle;
    border-style: none;
}

.mb-2 {
    margin-bottom: .5rem!important;
}

.fs-20 {
    font-size: 20px !important;
}

.pr-16 {
    padding-right: 16px !important;
}

.ls-1 {
    letter-spacing: 1px !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fs-16 {
    font-size: 16px !important;
}

.media-body>* {
    margin-bottom: 0;
}

small, time, .small {
    font-family: Roboto,sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: #8b95a5;
}

.fs-14 {
    font-size: 14px !important;
}

.mb-12 {
    margin-bottom: 12px !important;
}

.text-fade {
    color: rgba(77,82,89,0.7) !important;
}

.card-footer:last-child {
    border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
}

.card-footer {
    background-color: #fcfdfe;
    border-top: 1px solid rgba(77,82,89,0.07);
    color: #8b95a5;
    padding: 10px 20px;
}

.flexbox {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.align-items-center {
    -ms-flex-align: center!important;
    align-items: center!important;
}

.card-footer {
    padding: .75rem 1.25rem;
    background-color: rgba(0,0,0,.03);
    border-top: 1px solid rgba(0,0,0,.125);
}


.card-footer {
    background-color: #fcfdfe;
    border-top: 1px solid rgba(77, 82, 89, 0.07);
    color: #8b95a5;
    padding: 10px 20px
}

.card-footer>*:last-child {
    margin-bottom: 0
}

.hover-shadow {
    -webkit-box-shadow: 0 0 35px rgba(0, 0, 0, 0.11);
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.11)
}

.fs-10 {
    font-size: 10px !important;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 4.0.0-beta

Created: Oct 5th 2017, 12:48

Views: 2.9K

Rated 5/5 based on 9 reviews