CodePen Embed - Bootstrap Product

<div class="container" id="product-section">
  
  <div class="row">
   
   <div class="col-md-6">
     <!--      Elevate -->
        
<div class="gallery">
    <div id='carousel-custom' class='carousel slide' data-ride='carousel'>
        <div class='carousel-outer'>
            <!-- me art lab slider -->
            <div class='carousel-inner '>
                <div class='item active'>
                    <img src='http://images.asos-media.com/inv/media/8/2/3/3/5313328/print/image1xxl.jpg' alt=''id="zoom_05"  data-zoom-image="http://images.asos-media.com/inv/media/8/2/3/3/5313328/print/image1xxl.jpg">
                </div>
                <div class='item'  id="zoom_05">
                    <img src='http://images.asos-media.com/inv/media/8/2/3/3/5313328/image2xxl.jpg' alt='' data-zoom-image="http://images.asos-media.com/inv/media/8/2/3/3/5313328/image2xxl.jpg">
                </div>
                <div class='item'>
                    <img src='http://images.asos-media.com/inv/media/8/2/3/3/5313328/image3xxl.jpg' alt='' data-zoom-image="http://images.asos-media.com/inv/media/8/2/3/3/5313328/image3xxl.jpg">
                </div>
                    
                <div class='item'>
                    <img src='http://images.asos-media.com/inv/media/3/6/7/0/4850763/multi/image1xxl.jpg' alt='' data-zoom-image="http://images.asos-media.com/inv/media/3/6/7/0/4850763/multi/image1xxl.jpg" id="zoom_05">
                </div>
                <div class='item'>
                    <img src='http://images.asos-media.com/inv/media/5/2/1/3/4603125/gold/image1xxl.jpg' alt='' data-zoom-image="http://images.asos-media.com/inv/media/5/2/1/3/4603125/gold/image1xxl.jpg" id="zoom_05">
                </div>
                <div class='item'>
                    <img src='http://images.asos-media.com/inv/media/5/3/6/8/4948635/mink/image1xxl.jpg' alt='' data-zoom-image="http://images.asos-media.com/inv/media/5/3/6/8/4948635/mink/image1xxl.jpg" id="zoom_05">
                </div>
                <div class='item'>
                    <img src='http://images.asos-media.com/inv/media/1/3/0/8/5268031/image2xxl.jpgg' alt='' data-zoom-image="http://images.asos-media.com/inv/media/1/3/0/8/5268031/image2xxl.jpg" id="zoom_05">
                </div>
                <script>
                    $("#zoom_05").elevateZoom({ zoomType    : "inner", cursor: "crosshair" });
                </script>
            </div>
                
            <!-- sag sol -->
            <a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
                <span class='glyphicon glyphicon-chevron-left'></span>
            </a>
            <a class='right carousel-control' href='#carousel-custom' data-slide='next'>
                <span class='glyphicon glyphicon-chevron-right'></span>
            </a>
        </div>
        
        <!-- thumb -->
        <ol class='carousel-indicators mCustomScrollbar meartlab'>
            <li data-target='#carousel-custom' data-slide-to='0' class='active'><img src='http://images.asos-media.com/inv/media/8/2/3/3/5313328/print/image1xxl.jpg' alt='' /></li>
            <li data-target='#carousel-custom' data-slide-to='1'>
                <img src='http://images.asos-media.com/inv/media/8/2/3/3/5313328/image2xxl.jpg' alt=''>
            </li>
            <li data-target='#carousel-custom' data-slide-to='2'>
                <img src='http://images.asos-media.com/inv/media/8/2/3/3/5313328/image3xxl.jpg' alt=''>
            </li>
            <li data-target='#carousel-custom' data-slide-to='3'>
                <img src='http://images.asos-media.com/inv/media/3/6/7/0/4850763/multi/image1xxl.jpg' alt=''>
            </li>
            <li data-target='#carousel-custom' data-slide-to='4'>
                <img src='http://images.asos-media.com/inv/media/5/2/1/3/4603125/gold/image1xxl.jpg' alt=''>
            </li>
            <li data-target='#carousel-custom' data-slide-to='5'>
                <img src='http://images.asos-media.com/inv/media/5/3/6/8/4948635/mink/image1xxl.jpg' alt=''>
            </li>
            <li data-target='#carousel-custom' data-slide-to='6'>
                <img src='http://images.asos-media.com/inv/media/1/3/0/8/5268031/image2xxl.jpg' alt=''>
            </li>
        </ol>
    </div>
</div>


     <!-- Elevate end      -->
   </div>
   
   <div class="col-md-6">
      
      <div class="row">
        <div class="col-md-12">
          <h1 class="main-title">Lorem Ipsum</h1>
         </div>
       </div><!-- end row-->
      
      <div class="row">
        <div class="col-md-12">
          <span class="tags label label-primary">Lorem</span>
        </div>
      </div><!-- end row -->
      
      <div class="row">
         <div class="col-md-12">
          <span class="monospaced">cod. 1960140180</span>
         </div>
      </div><!-- end row -->
      
      <div class="row">
        <div class="col-md-12">
          <p class="description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue vestibulum leo, eu semper justo eleifend at. Nam eu magna et erat feugiat imperdiet. Nunc id odio vitae turpis molestie faucibus iaculis vel dolor. Donec eu tempus eros. Ut facilisis lacus eu ex feugiat, a gravida nulla tincidunt. Aenean pretium risus id purus suscipit, id ornare odio blandit. Phasellus nisl quam, sagittis a purus sed, sollicitudin luctus risus. Nam ut mauris a tortor viverra tincidunt. Proin suscipit mi eu accumsan faucibus. Cras vehicula arcu cursus dui lacinia, sit amet vulputate mauris laoreet. Duis malesuada fermentum placerat. Nam quam tortor, bibendum non nulla ut, vulputate tempor orci. Proin ligula augue, tincidunt ac sodales sed, gravida id est.
          </p>
        </div>
      </div><!-- end row -->
    
      <div class="row">
        <div class="col-md-12 bottom-rule">
          <h2 class="product-price">$129.00</h2>
        </div>
      </div><!-- end row -->

      <div class="row add-to-cart">
        <div class="col-md-6 product-qty">
          <span class="btn btn-default btn-lg btn-qty">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
          </span>
          <input class="btn btn-default btn-lg btn-qty" value="1" />
          <span class="btn btn-default btn-lg btn-qty">
            <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
          </span>
        </div>
        <div class="col-md-6">
          <button class="btn btn-lg btn-brand btn-full-width">
            Add to Cart
          </button>
        </div>
      </div><!-- end row -->

      <div class="row">
        <div class="col-md-12">
          <span class="monospaced">En Stock</span>
        </div>
      </div><!-- end row -->

      <div class="row'">
        <div class="col-md-12">
          <div class="tabs">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
             <li role="presentation" class="active">
              <a href="#description" aria-controls="description" role="tab" data-toggle="tab">Description</a>
             </li>
             <li role="presentation">
              <a href="#features" aria-controls="features" role="tab" data-toggle="tab">Features</a>
             </li>
             <li role="presentation">
              <a href="#notes" aria-controls="notes" role="tab" data-toggle="tab"
               >Notes</a>
             </li>
             <li role="presentation">
              <a href="#reviews" aria-controls="reviews" role="tab" data-toggle="tab">Reviews</a>
             </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
              <div role="tabpanel" class="tab-pane active" id="description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rhoncus ante ac suscipit malesuada. Duis ac fringilla nibh. Proin condimentum finibus arcu ac semper. Integer viverra dui quis malesuada rhoncus. Ut ut nisl ultrices, tincidunt urna vitae, feugiat metus. Aenean dui dolor, interdum nec lacus id, venenatis dignissim lectus. In egestas congue turpis in porta. Integer nec rutrum orci. Curabitur maximus ac turpis eu feugiat.
              </div>
              <div role="tabpanel" class="tab-pane top-10" id="features">
                Donec vestibulum feugiat ex ac gravida. Cras eleifend non magna non sodales. Sed velit lacus, rhoncus vel efficitur sit amet, facilisis vitae lorem. Sed eu nisi feugiat, hendrerit metus in, varius mi. Cras auctor nulla in dolor porta, et accumsan magna bibendum. Suspendisse potenti. Aliquam dui nisl, varius vel mi vel, consectetur malesuada metus. Etiam lobortis sit amet orci ac vulputate.
              </div>
              <div role="tabpanel" class="tab-pane" id="notes">
                Proin eu tortor nec ante porta dictum et et nisi. Fusce posuere eros ut ipsum pulvinar blandit. Quisque massa lectus, efficitur quis enim quis, volutpat sollicitudin erat. Nullam iaculis nec augue ac auctor. Maecenas a nisl porta, ullamcorper ligula at, faucibus erat. Nullam sed consequat urna. Morbi id elit ex. Donec vehicula justo nisl, eget tempus enim rhoncus ac. Nullam luctus magna vel maximus pulvinar. Morbi ac turpis tortor. Cras lectus purus, ullamcorper ut fringilla eget, ultricies eget mauris. Proin id volutpat lacus.
              </div>
              <div role="tabpanel" class="tab-pane" id="reviews">
                Donec tortor tortor, mattis in malesuada interdum, commodo sit amet nisl. Vestibulum varius velit at leo luctus convallis. Aenean ante nibh, semper nec mauris dictum, venenatis faucibus risus. Morbi ac risus ac lacus semper lobortis. Phasellus vitae eros pulvinar, porta neque id, ornare felis. Quisque congue dolor dolor, eget feugiat mi elementum ut. Duis non massa non mi vestibulum consequat. Aliquam quam leo, pretium tempus augue sed, pharetra tincidunt nulla. Quisque mollis dictum ultricies. Praesent urna felis, molestie eget scelerisque eget, convallis at nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              </div>
            </div>
          </div>
        </div>
      </div>


    
    </div>
  </div><!-- end row -->
 </div><!-- end container -->

.monospaced {
  font-family: 'Ubuntu Mono', monospaced ;
}
.add-to-cart .btn-qty {
  width: 52px;
  height: 46px;
}
.add-to-cart .btn {
  border-radius: 0;
}

/* Elevate */
  .carousel-inner {
  position: relative;
  width: 100%;
  min-height: 300px;
  }
 
 .carousel-control.right {
  right: 0;
  left: auto;
  background-image: none !important;
  background-repeat: repeat-x;
}
 .carousel-control.left {
  left: 0;
  right: auto;
  background-image: none !important;
  background-repeat: repeat-x;
}
#carousel-example-generic {
    margin: 20px auto;
    width: 100%;
}

#carousel-custom {
    margin: 20px auto;
    width: 400px;
}
#carousel-custom .carousel-indicators {
    margin: 10px 0 0;
    overflow: auto;
    position: static;
    text-align: left;
    white-space: nowrap;
    width: 100%;
    overflow:hidden;
}
#carousel-custom .carousel-indicators li {
    background-color: transparent;
    -webkit-border-radius: 0;
    border-radius: 0;
    display: inline-block;
    height: auto;
    margin: 0 !important;
    width: auto;
}
#carousel-custom .carousel-indicators li img {
    display: block;
    opacity: 0.5;
}
#carousel-custom .carousel-indicators li.active img {
    opacity: 1;
}
#carousel-custom .carousel-indicators li:hover img {
    opacity: 0.75;
}
#carousel-custom .carousel-outer {
    position: relative;
}
.carousel-indicators li img {
  height: 66px;
  width: 52px;
}
/* Elevate end */

$(document).ready(function() {
    $(".mCustomScrollbar").mCustomScrollbar({axis:"x"});
});

This Pen is owned by Ignacio Lopez Juani on CodePen.

See more by @ignaciolopezjuani on CodePen

External CSS

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External CSS

External JavaScript