<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<section class="container df-search-results-with-image">
<div class="df-module-title text-primary mt-3">
<h4>
Module Search results
</h4>
</div>
<h6 class="lead"><strong class="text-primary">3</strong> results were found for the search for <strong class="text-primary">Lorem</strong></h6>
<hr class="border-top border-light">
<div class="row mb-3">
<div class="col-3 df-image-search">
<a href="#">
<figure>
<div class="figure-img text-center">
<img src="//via.placeholder.com/245x137?text=IMAGE1" alt="Lorem ipsum" class="img-fluid rounded img-thumbnail shadow" loading="lazy"/>
</div>
</figure>
</a>
</div>
<div class="col-9 df-text-search">
<a href="#">
<h4 class="text-truncate">Voluptatem, exercitationem, suscipit, distinctio Voluptatem, exercitationem, suscipit, distinctio Voluptatem, exercitationem, suscipit, distinctio</h4>
<p class="df-text-search-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, exercitationem, suscipit, distinctio, qui sapiente aspernatur molestiae non corporis magni sit sequi iusto debitis delectus doloremque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, exercitationem, suscipit, distinctio, qui sapiente aspernatur molestiae non corporis magni sit sequi iusto debitis delectus doloremque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, exercitationem, suscipit, distinctio, qui sapiente aspernatur molestiae non corporis magni sit sequi iusto debitis delectus doloremque.</p>
<p class="df-text-search-url small mb-0">https://www.testurl.com/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test</p>
<span class="df-text-search-icon text-secondary">
<i class="fas fa-calendar fa-fw mr-2"></i>
<span>02/15/2014</span>
</span>
</a>
</div>
</div>
<div class="row mb-3">
<div class="col-3 df-image-search">
<a href="#">
<figure>
<div class="figure-img text-center">
<img src="//via.placeholder.com/245x137?text=IMAGE1" alt="Lorem ipsum" class="img-fluid rounded img-thumbnail shadow" loading="lazy"/>
</div>
</figure>
</a>
</div>
<div class="col-9 df-text-search">
<a href="#">
<h4 class="text-truncate">Voluptatem, exercitationem, suscipit, distinctio Voluptatem, exercitationem, suscipit, distinctio Voluptatem, exercitationem, suscipit, distinctio</h4>
<p class="df-text-search-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, exercitationem, suscipit, distinctio, qui sapiente aspernatur molestiae non corporis magni sit sequi iusto debitis delectus doloremque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, exercitationem, suscipit, distinctio, qui sapiente aspernatur molestiae non corporis magni sit sequi iusto debitis delectus doloremque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, exercitationem, suscipit, distinctio, qui sapiente aspernatur molestiae non corporis magni sit sequi iusto debitis delectus doloremque.</p>
<p class="df-text-search-url small mb-0">https://www.testurl.com/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test</p>
<span class="df-text-search-icon text-secondary">
<i class="fas fa-calendar fa-fw mr-2"></i>
<span>02/15/2014</span>
</span>
</a>
</div>
</div>
<div class="row mb-3">
<div class="col-3 df-image-search">
<a href="#">
<figure>
<div class="figure-img text-center">
<img src="//via.placeholder.com/245x137?text=IMAGE1" alt="Lorem ipsum" class="img-fluid rounded img-thumbnail shadow" loading="lazy"/>
</div>
</figure>
</a>
</div>
<div class="col-9 df-text-search">
<a href="#">
<h4 class="text-truncate">Voluptatem, exercitationem, suscipit, distinctio Voluptatem, exercitationem, suscipit, distinctio Voluptatem, exercitationem, suscipit, distinctio</h4>
<p class="df-text-search-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, exercitationem, suscipit, distinctio, qui sapiente aspernatur molestiae non corporis magni sit sequi iusto debitis delectus doloremque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, exercitationem, suscipit, distinctio, qui sapiente aspernatur molestiae non corporis magni sit sequi iusto debitis delectus doloremque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, exercitationem, suscipit, distinctio, qui sapiente aspernatur molestiae non corporis magni sit sequi iusto debitis delectus doloremque.</p>
<p class="df-text-search-url small mb-0">https://www.testurl.com/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test/site/test</p>
<span class="df-text-search-icon text-secondary">
<i class="fas fa-calendar fa-fw mr-2"></i>
<span>02/15/2014</span>
</span>
</a>
</div>
</div>
</div>
</section>
<section class="container df-search-results-with-image-paginator pb-3 pt-3">
<hr class="border-top border-light">
<nav>
<ul class="pagination">
<li class="page-item disabled shadow">
<a class="page-link">
<i class="fas fa-arrow-alt-circle-left fa-fw">
</i>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
1
</a>
</li>
<li class="page-item active">
<span class="page-link">
2
</span>
</li>
<li class="page-item">
<a class="page-link" href="#">
3
</a>
</li>
<li class="page-item shadow">
<a class="page-link" href="#">
<i class="fas fa-arrow-alt-circle-right fa-fw">
</i>
</a>
</li>
</ul>
</nav>
</section>
.df-search-results-with-image ul{padding-left:0!important;list-style:none}
.df-search-results-with-image .df-text-search p{color:#666;max-height:60px;font-size:90%;line-height:20px;overflow:hidden}
.df-search-results-with-image .df-text-search a:hover{text-decoration:none!important}
.df-search-results-with-image p.df-text-search-url {font-size:small;padding-top:3px;margin-top: -10px;border-top:1px solid #eee;color:#03a9f4!important}
.df-search-results-with-image p.df-text-search-url:hover{color:#222!important;text-decoration:underline}
.df-search-results-with-image span.df-text-search-icon{font-size:small;margin-top:-10px}
