Bootstrap three image column layout html css code

<div class="container py-5">
  <div class="row py-5">
    <div class="col-12 text-center">
     
      <h2 class="mb-2 h1 font-weight-bold">Super clean user interface for easier use.</h2>
       <p class="text-muted mb-5 pb-3">Our design projects are fresh and simple and will benefit your
        business greatly.</p>
      
      <div class="row">
      <div class="col-lg-4 col-md-6 vv">
      <img src="https://bootstraplily.com/demo/detto-ui-kit/img/content-demo-seven.jpg" class="rounded img-fluid">
      <h5 class="mb-3 mt-5">Image Heading Here</h5>
      <p class="mb-4 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut mattis metus, id accumsan erat.</p>
       <a href="" class="btn btn-link">View More &rarr;</a>
      </div>
      <div class="col-lg-4 col-md-6 vv">
      <img src="https://bootstraplily.com/demo/detto-ui-kit/img/content-demo-five.jpg" class="rounded img-fluid">
      <h5 class="mb-3 mt-5">Image Heading Here</h5>
      <p class="mb-4 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut mattis metus, id accumsan erat.</p>
      <a href="" class="btn btn-link">View More &rarr;</a>
      </div>
  <div class="col-lg-4 col-md-6 vv">
      <img src="https://bootstraplily.com/demo/detto-ui-kit/img/content-demo-six.jpg" class="rounded img-fluid">
      <h5 class="mb-3 mt-5">Image Heading Here</h5>
      <p class="mb-4 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut mattis metus, id accumsan erat.</p>
      <a href="" class="btn btn-link">View More &rarr;</a>
      </div>
      </div>      
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
body {
    font-family: 'Roboto', sans-serif;
}
.vv img{
transition:all 0.3s ease;
cursor:pointer;    
}
.vv img:hover{
opacity:0.8;    
box-shadow: 0px 0px 5px 8px rgba(0,0,0,0.08);
}