Display placeholder image when empty.
You can use a drawer with empty state.
<a class="btn btn-primary drawer-toggle-link" data-target="#empty_drawer" data-drawer="overlay" href="javascript:void(0);">Drawer</a>
<!-- Empty Drawer -->
<div id="empty_drawer" class="hk-drawer drawer-right">
<div class="drawer-header">
<div class="drawer-text">Your Cart</div>
<button type="button" class="drawer-close btn-close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="drawer-body">
<div data-simplebar class="nicescroll-bar">
<div class="drawer-content-wrap">
<img src="dist/img/empty-cart.png" class="img-fluid" alt="cart">
<p class="text-dark">Your Cart looks a little empty. Checkout some <a href="#" class="text-dark"><u>unbeatable deals?</u></a></p>
</div>
</div>
</div>
<div class="drawer-footer">
<p class="p-xs">All illustration are powered by <a href="#"><u>OUCH</u></a></p>
</div>
</div>
<!-- /Empty Drawer -->
You can use a bootstrap card with empty state.
With supporting text below as a natural lead-in to additional content.
Add event
<div class="card">
<div class="card-body">
<div class="w-250p mx-auto">
<img class="img-fluid d-inline-block" src="dist/img/empty-2.png" alt="empty2"/>
</div>
<div class="text-center">
<h4 class="h4">You have nothing to display</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Add event</a>
</div>
</div>
</div>