This two column bootstrap snipp minimal code easy to use on your web page, 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 text-left"> <div class="col-lg-6 col-md-6 vv"> <img src="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-link">View More →</a> </div> <div class="col-lg-6 col-md-6 vv"> <img src="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-link">View More →</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); }
No js required