"Service Section with Youtube Embed Video"
Bootstrap 3.0.0 Snippet by Divscodebd

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <title>Service Section Design</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container"> <div class="row mar-top-30"> <div class="col-sm-4"> <div class="box text-center"> <div class="incon-box"> <i class="fa fa-truck" aria-hidden="true"></i> </div> <h3 class="box-tittle">Free Shipping</h3> <p class="box-text">Free Shipping on All Oder $199</p> </div> </div> <div class="col-sm-4"> <div class="box text-center"> <div class="incon-box"> <i class="fa fa-usd" aria-hidden="true"></i> </div> <h3 class="box-tittle">Money Back</h3> <p class="box-text">100% Money Back Guarantee</p> </div> </div> <div class="col-sm-4"> <div class="box text-center"> <div class="incon-box"> <i class="fa fa-yelp" aria-hidden="true"></i> </div> <h3 class="box-tittle">Online Support</h3> <p class="box-text">Service Support First</p> </div> </div> </div> <div class="row mar-top-30"> <div class="col-sm-4"> <div class="box text-center"> <iframe src="https://www.youtube.com/embed/nMBmLLpo9CA" frameborder="0" allowfullscreen></iframe> </div> </div> <div class="col-sm-4"> <div class="box text-center"> <iframe height="315" src="https://www.youtube.com/embed/mc3aTxClUAk" frameborder="0" allowfullscreen></iframe> </div> </div> <div class="col-sm-4"> <div class="box text-center"> <iframe src="https://www.youtube.com/embed/R0g_9g9vb2A" frameborder="0" allowfullscreen></iframe> </div> </div> </div> </div> </body> </html>
.box { cursor: pointer; box-shadow: 0px 2px 10px -4px #333745; padding: 20px 0px; margin-bottom: 20px; } .incon-box i { font-size: 35px; color: #fff; background: #f82e56; height: 55px; width: 55px; line-height: 50px; border: 3px solid transparent; transition: all .4s ease-in; } .box-tittle { font-size: 20px; text-transform: uppercase; color: #333745; line-height: 60px; } .box:hover .incon-box i { background: #fff; border: 3px solid #f82e56; color: #f82e56; transition: all .4s ease-in; } .mar-top-30{ margin-top: 30px; } .box iframe{ width: 100%; height: 180px; }

Related: See More

Gaia Bootstrap Template Pro
Our Team section using bootstrap 4
Team Design Section with Pure CSS Effect
Services section using bootstrap 4

Questions / Comments: