To insert this widget with image cards – see the steps below:

Go to Appearance -> Widgets -> Drag widget “Advanced Text” to the right where you want to be, and in the Text insert this code:

<!— Cards –>
<div class=”container-fluid padding”>
<div class=”row padding”>
<div class=”col-md-4″>
<div class=”card”>
<img class=”card-img-top” src=”https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80“>
<div class=”card-body”>
<h4 class=”card-title”>John Smith</h4>
<p class=”card-text”>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi dolores voluptas sit. Quia harum debitis fugit!</p>
<a href=”#” class=”btn btn-outline-secondary”>See Profile</a>
</div>
</div>
</div>
<div class=”col-md-4″>
<div class=”card”>
<img class=”card-img-top” src=”https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80“>
<div class=”card-body”>
<h4 class=”card-title”>Mary Smith</h4>
<p class=”card-text”>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi dolores voluptas sit. Quia harum debitis fugit!</p>
<a href=”#” class=”btn btn-outline-secondary”>See Profile</a>
</div>
</div>
</div>
<div class=”col-md-4″>
<div class=”card”>
<img class=”card-img-top” src=”https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80“>
<div class=”card-body”>
<h4 class=”card-title”>Phil Ho</h4>
<p class=”card-text”>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi dolores voluptas sit. Quia harum debitis fugit!</p>
<a href=”#” class=”btn btn-outline-secondary”>See Profile</a>
</div>
</div>
</div>
</div>
</div>

To change the images, you should insert your own image URLs. After that – Save. And That’s it.

Newsletter Subscription