<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-12 bg-primary p-2 text-white mt-2 text-center text-capitalize">
product details page with nav-pills
</div>
</div>
<div class="row mt-4">
<div class="col-lg-1 text-center">
<ul class="nav nav-tabs row text-center pro-details" id="myTab" role="tablist">
<li class="nav-item col-lg-12 mb-2">
<img class="img-fluid active h-100" src="https://pbs.twimg.com/media/ENktSOKU0AA9Y-6.jpg" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true"/>
</li>
<li class="nav-item col-lg-12 mb-2">
<img class="img-fluid h-100" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" src="https://pbs.twimg.com/media/ENktSOTUEAELNMN.jpg" />
</li>
<li class="nav-item col-lg-12 mb-2">
<div style="height:50px">
<img class="img-fluid h-100" src="https://pbs.twimg.com/media/ENktSONUEAAm6k1.jpg" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false"/>
</div>
</li>
<li class="nav-item col-lg-12 mb-2">
<img class="img-fluid h-100" src="https://pbs.twimg.com/media/EOYIp0FUYAA0uM1?format=jpg&name=360x360" id="product-tab" data-toggle="tab" href="#product" role="tab" aria-controls="product" aria-selected="false"/>
</li>
<li class="nav-item col-lg-12 mb-2">
<img class="img-fluid h-100" src="https://pbs.twimg.com/media/EOYIp0DUUAA29Ft?format=jpg&name=small" id="productTwo-tab" data-toggle="tab" href="#productTwo" role="tab" aria-controls="productTwo" aria-selected="false"/>
</li>
<li class="nav-item col-lg-12 mb-2">
<img class="img-fluid h-100" src="https://pbs.twimg.com/media/EOYIp0JVUAANGFD?format=jpg&name=small" id="productThree-tab" data-toggle="tab" href="#productThree" role="tab" aria-controls="productThree" aria-selected="false"/>
</li>
</ul>
</div>
<div class="col-lg-4 text-center border-right border-secondery">
