Three column circle image ui made with bootstrap html

This three column circle image ui made with bootstrap html, you can use this on middle of your web page, simple div structure easy to implement.





<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 profile-circel-image-200">
      <img src="img/content-demo-seven.jpg" class="img-fluid rounded-circle">
      <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 profile-circel-image-200">
      <img src="img/content-demo-five.jpg" class="rounded img-fluid rounded-circle">
      <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 profile-circel-image-200">
      <img src="img/content-demo-six.jpg" class="rounded img-fluid rounded-circle">
      <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;
}
.profile-circel-image-200 img {
    width: 200px;
    height: 200px;
    border-radius: 200px;
}
.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);
}

No js required

Spread the love

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top