Empty State

  
   
 <div class="row">
   <div class="col-md-6 bg-grey p-5 my-5 ">
   <div class=" d-flex align-items-center justify-content-center">
      <img class="" src="assets/img/empty-state.svg">
   </div>
   <h5 class="heading">Data not found</h5>
   <p class="p-style my-4 d-flex justify-content-center ">This container has a border and some extra padding and margins.</p>
   <div class="text-center">
      <button type="button" class="btn btn-primary me-3"> Button</button>  
   </div>
</div>
<div class="col-md-6 bg-grey p-5 my-5 ">
   <div class=" d-flex align-items-center justify-content-center">
      <img class="" src="assets/img/stateofjourney.svg">
   </div>
   <h5 class="heading">State Your Journey</h5>
   <p class="p-style my-4 d-flex justify-content-center ">
      Nulla hendrerit diam non risus gravida, sit amet porta lacus sollicitudin. Cras laoreet gravida odio id congue. Donec vestibulum nibh felis, quis faucibus orci hendrerit eu. Morbi scelerisque posuere nisi, eget commodo purus tincidunt sed. Nunc volutpat euismod felis ac venenatis.
   </p>
   <div class="text-center">
      <button type="button" class="btn btn-danger me-3">Button</button> 
      <button type="button" class="btn btn-primary me-3"> Primary Button</button>  
   </div>
</div>
<div class="col-md-12 bg-grey p-5 my-5 ">
   <div class=" d-flex align-items-center justify-content-center">
      <img class="" src="assets/img/noresult.svg">
   </div>
   <h5 class="heading">Search not found</h5>
   <p class="p-style my-4 d-flex justify-content-center ">
      Possible way to view the data. Provide solution to the problem.
   </p>
   <div class="text-center">
      <a href="#" class="link-primary">Trigger Action</a>
   </div>
</div>
</div>
  

  
   
 
   
      .align-items-center {
         align-items: center!important;
     }
     
     .justify-content-center {
         justify-content: center!important;
     }
     .d-flex {
         display: flex!important;
     }
     
     img, svg {
         vertical-align: middle;
     }
     
     .heading {
         font-weight: 700;
         align-items: center;
         text-align: center;
         padding-top: 10px;
     }
     .p-style {
         color: #363431;
         font-weight: 500;
     }
     
     .my-4 {
         margin-top: 1.5rem!important;
         margin-bottom: 1.5rem!important;
     }
     .link-primary {
         color: #167DF5!important;
         font-size: 14px;
     }