bs4 card block

This bootstrap snippet called "bs4 card block" 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: bs4,block,cards,profile,user

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

<div class="container">
    <div class="row">
        <div class="col-md-6 col-xl-4">
            <div class="card borderless-card">
                <div class="profile-card">
                    <img class="img-fluid" src="https://lorempixel.com/450/450/nature/6/" alt="">
                    <div class="card-block">
                        <h3>Title</h3>
                        <p>Lorem ipsum dolor sit amet, consectetuer</p>
                        <button class="btn btn-info ">+ Follow</button>
                    </div>
                </div>
                <div class="card-footer bg-inverse">
                    <div class="row text-center">
                        <div class="col-sm-4">
                            <h4>134</h4>
                            <span>Shots</span>
                        </div>
                        <div class="col-sm-4">
                            <h4>13,227</h4>
                            <span>Shots</span>
                        </div>
                        <div class="col-sm-4">
                            <h4>488</h4>
                            <span>Shots</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-4">
            <div class="card borderless-card">
                <div class="profile-card">
                    <img class="img-fluid" src="https://lorempixel.com/450/450/nature/5/" alt="">
                    <div class="card-block">
                        <h3>Title</h3>
                        <p>Lorem ipsum dolor sit amet, consectetuer</p>
                        <button class="btn btn-info ">+ Follow</button>
                    </div>
                </div>
                <div class="card-footer bg-inverse">
                    <div class="row text-center">
                        <div class="col-sm-4">
                            <h4>134</h4>
                            <span>Shots</span>
                        </div>
                        <div class="col-sm-4">
                            <h4>13,227</h4>
                            <span>Shots</span>
                        </div>
                        <div class="col-sm-4">
                            <h4>488</h4>
                            <span>Shots</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</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{
    margin-top:20px;
    background-color: #f3f3f3;
    }
.card {
    border-radius: 5px;
    box-shadow: 0 1px 11px 0 rgba(0, 0, 0, 0.12);
    border: none;
    margin-bottom: 30px;
}
.profile-card {
    position: relative;
}
.profile-card .card-block {
    text-align: center;
    color: #fff;
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    background: linear-gradient(transparent, rgba(0,0,0,0.72));
}

.card-block {
    padding: 1.25rem;
}

.card .card-block p {
    line-height: 25px;
}
@media only screen and (min-width: 1400px){
    p {
        font-size: 14px;
    }
}
p {
    font-size: 13px;
}
.btn-info {
    background-color: #62d1f3;
    border-color: #62d1f3;
    color: #fff;
    cursor: pointer;
    transition: all ease-in 0.3s;
}
.btn {
    border-radius: 2px;
    text-transform: capitalize;
    font-size: 15px;
    padding: 10px 19px;
    cursor: pointer;
}
.card .card-footer {
    background-color: #fff;
    border-top: none;
}
.profile-card ~ .card-footer {
    padding: 0;
}
.bg-inverse {
    background-color: #1a1b1d !important;
    color: #fff;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 4.1.1

Created: Oct 20th, 08:36

Views: 4