Two column bootstrap snipp minimal code easy to use on your web page

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 &rarr;</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 &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);
}

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