<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="well text-center"> <h2>Services Section with image</h2> </div> </div> </div> <div class="row"> <div class="choose-area"> <div class="col-md-7 p-0 col-7 col-md "> <div class="choose-wrapper blue-bg"> <div class="section-title mb-40 white-text"> <h4>why choose us</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p> </div> <div class="row custom-row"> <div class="col-md-6 col-sm-6 choose-space"> <div class="choose-content-wrapper mb-50 text-center"> <div class="choose-categories-img"> <i class="fa fa-paper-plane" aria-hidden="true"></i> </div> <div class="choose-categories-content"> <h5>Technology</h5> <p>Lorem ipsum dolor sit amet, conadipng elit, sed do eiusmod tempor incidilabore</p> </div> </div> </div> <div class="col-md-6 col-sm-6 choose-space"> <div class="choose-content-wrapper mb-50 text-center"> <div class="choose-categories-img"> <i class="fa fa-shield" aria-hidden="true"></i> </div> <div class="choose-categories-content"> <h5>design</h5> <p>Lorem ipsum dolor sit amet, conadipng elit, sed do eiusmod tempor incidilabore</p> </div> </div> </div> <div class="col-md-6 col-sm-6 choose-space"> <div class="choose-content-wrapper mb-50 text-center"> <div class="choose-categories-img"> <i class="fa fa-pie-chart" aria-hidden="true"></i> </div> <div class="choose-categories-content"> <h5>music</h5> <p>Lorem ipsum dolor sit amet, conadipng elit, sed do eiusmod tempor incidilabore</p> </div> </div> </div> <div class="col-md-6 col-sm-6 choose-space"> <div class="choose-content-wrapper mb-50 text-center"> <div class="choose-categories-img"> <i class="fa fa-life-ring" aria-hidden="true"></i> </div> <div class="choose-categories-content"> <h5>languagfe</h5> <p>Lorem ipsum dolor sit amet, conadipng elit, sed do eiusmod tempor incidilabore</p> </div> </div> </div> </div> </div> </div> <div class="col-md-5 col-5 p-0 col-md choose-img ptb-100"></div> </div> </div> </div>

.ptb-80{ padding: 80px 0; } .choose-area { overflow: hidden; position: relative; } .col-7 { width: 53%; } .p-0 { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .choose-img { background-image: url("http://17026-presscdn-0-98.pagely.netdna-cdn.com/wp-content/uploads/sites/13/2017/08/AdobeStock_119944873.jpeg"); background-position: center center; background-size: cover; height: 100%; padding: 0; position: absolute; right: 0; top: 0; } .col-5 { width: 47%; } @media (max-width: 1500px) and (min-width: 1200px) .choose-wrapper { padding: 70px 50px 50px; } @media (max-width: 1500px) and (min-width: 1200px) .choose-wrapper { padding: 130px 15px 127px; } .choose-wrapper { padding: 40px 80px 50px 80px; } .blue-bg { background: #051937; } .white-text { color: #fff; } .section-title { } .mb-40 { margin-bottom: 40px; } .section-title h4 { color: #fff; font-size: 30px; font-weight: 700; margin-bottom: 24px; padding-bottom: 12px; position: relative; text-transform: uppercase; } .section-title h4::before { background: #eeeeee none repeat scroll 0 0; bottom: 0; content: ""; height: 2px; left: 0; position: absolute; width: 100px; } .section-title p { color: #6f6f6f; font-size: 14px; font-weight: 400; line-height: 23px; width: 665px; } .custom-row { margin: 0 -25px; } .choose-space { padding: 0 25px; } .choose-content-wrapper { background: #12446c none repeat scroll 0 0; padding: 30px 49px 33px; } .mb-50 { margin-bottom: 50px; } .choose-categories-img { background: #fff none repeat scroll 0 0; border-radius: 100%; display: inline-block; height: 50px; line-height: 50px; margin: auto; text-align: center; width: 50px; } .choose-categories-content h5 { color: #ffffff; font-size: 16px; font-weight: 700; margin-top: 19px; text-transform: uppercase; } .choose-categories-content p { color: #fff; font-size: 14px; font-weight: 400; line-height: 23px; margin-bottom: 0; }