Step 1 : First of all Load Bootstrap 4 Source files





Step 2 : Next put the below code inside the body tag
<div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4 col-lg-4 mt-4">
                <div class="card">
                        <img class="card-img-top" src="https://picsum.photos/200/150/?random">
                    <div class="card-block">
                        <figure class="profile">
                            <img src="https://picsum.photos/id/1060/536/354" class="profile-avatar" alt="">
                        </figure>
                        <h4 class="card-title mt-3">Post Title</h4>
                        <div class="meta">
                            <a>Category | Admin | Comments</a>
                        </div>
                        <div class="card-text">
                           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  </div>
                    </div>
                    <div class="card-footer">
                        <small>Last updated 3 mins ago</small>
                        <button class="btn btn-success float-right btn-sm">show</button>
                    </div>
                </div>
            </div>
                <div class="col-sm-6 col-md-4 col-lg-4 mt-4">
                <div class="card">
                        <img class="card-img-top" src="https://picsum.photos/id/1060/536/354">
                    <div class="card-block">
                        <figure class="profile">
                            <img src="https://picsum.photos/200/150/?random" class="profile-avatar" alt="">
                        </figure>
                        <h4 class="card-title mt-3">Post Title</h4>
                        <div class="meta">
                            <a>Category | Admin | Comments</a>
                        </div>
                        <div class="card-text">
                           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  </div>
                    </div>
                    <div class="card-footer">
                        <small>Last updated 3 mins ago</small>
                        <button class="btn btn-success float-right btn-sm">show</button>
                    </div>
                </div>
            </div>
                <div class="col-sm-6 col-md-4 col-lg-4 mt-4">
                <div class="card">
                        <img class="card-img-top" src="https://picsum.photos/id/1060/536/354">
                    <div class="card-block">
                        <figure class="profile">
                            <img src="https://picsum.photos/200/150/?random" class="profile-avatar" alt="">
                        </figure>
                        <h4 class="card-title mt-3">Post Title</h4>
                        <div class="meta">
                            <a>Category | Admin | Comments</a>
                        </div>
                        <div class="card-text">
                           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  </div>
                    </div>
                    <div class="card-footer">
                        <small>Last updated 3 mins ago</small>
                        <button class="btn btn-success float-right btn-sm">show</button>
                    </div>
                </div>
            </div>
        </div>

</div>

 

 

Step 3 : Copy and Paste the following CSS into your Stylesheet


.card {
    font-size: 1em;
    overflow: hidden;
    padding: 0;
    border: none;
    border-radius: .28571429rem;
    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
}

.card-block {
    font-size: 1em;
    position: relative;
    margin: 0;
    padding: 1em;
    border: none;
    border-top: 1px solid rgba(34, 36, 38, .1);
    box-shadow: none;
}

.card-img-top {
    display: block;
    width: 100%;
    height: auto;
}

.card-title {
    font-size: 1.28571429em;
    font-weight: 700;
    line-height: 1.2857em;
}

.card-text {
    clear: both;
    margin-top: .5em;
    color: rgba(0, 0, 0, .68);
}

.card-footer {
    font-size: 1em;
    position: static;
    top: 0;
    left: 0;
    max-width: 100%;
    padding: .75em 1em;
    color: rgba(0, 0, 0, .4);
    border-top: 1px solid rgba(0, 0, 0, .05) !important;
    background: #fff;
}

.card-inverse .btn {
    border: 1px solid rgba(0, 0, 0, .05);
}

.profile {
    position: absolute;
    top: -12px;
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
    width: 25px;
    height: 25px;
    margin: 0;
    border: 1px solid #fff;
    border-radius: 50%;
}

.profile-avatar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.profile-inline {
    position: relative;
    top: 0;
    display: inline-block;
}

.profile-inline ~ .card-title {
    display: inline-block;
    margin-left: 4px;
    vertical-align: top;
}

.text-bold {
    font-weight: 700;
}

.meta {
    font-size: 1em;
    color: rgba(0, 0, 0, .4);
}

.meta a {
    text-decoration: none;
    color: rgba(0, 0, 0, .4);
}

.meta a:hover {
    color: rgba(0, 0, 0, .87);
}

Step 4 : Done Final Result