" E Commerce products"
Bootstrap 3.3.0 Snippet by ashishinbase

Post to Facebook Tweet this

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>eCommerce Product Detail</title> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet"> </head> <body> <div class="container"> <div class="card"> <div class="container-fliud"> <div class="wrapper row"> <div class="preview col-md-6"> <div class="preview-pic tab-content"> <div class="tab-pane active" id="pic-1"><img src="https://d.ibtimes.co.uk/en/full/1519347/lionel-messi.jpg?w=400" /></div> <div class="tab-pane" id="pic-2"><img src="https://d.ibtimes.co.uk/en/full/1519347/lionel-messi.jpg?w=400" /></div> <div class="tab-pane" id="pic-3"><img src="https://d.ibtimes.co.uk/en/full/1519347/lionel-messi.jpg?w=400" /></div> <div class="tab-pane" id="pic-4"><img src="https://d.ibtimes.co.uk/en/full/1519347/lionel-messi.jpg?w=400" /></div> <div class="tab-pane" id="pic-5"><img src="https://d.ibtimes.co.uk/en/full/1519347/lionel-messi.jpg?w=400" /></div> </div> <ul class="preview-thumbnail nav nav-tabs"> <li class="active"><a data-target="#pic-1" data-toggle="tab"><img src="https://d.ibtimes.co.uk/en/full/1519347/lionel-messi.jpg?w=400" /></a></li> <li><a data-target="#pic-2" data-toggle="tab"><img src="https://d.ibtimes.co.uk/en/full/1519347/lionel-messi.jpg?w=400" /></a></li> <li><a data-target="#pic-3" data-toggle="tab"><img src="https://d.ibtimes.co.uk/en/full/1519347/lionel-messi.jpg?w=400" /></a></li> <li><a data-target="#pic-4" data-toggle="tab"><img src="https://d.ibtimes.co.uk/en/full/1519347/lionel-messi.jpg?w=400" /></a></li> <li><a data-target="#pic-5" data-toggle="tab"><img src="https://d.ibtimes.co.uk/en/full/1519347/lionel-messi.jpg?w=400" /></a></li> </ul> </div> </div> </div> </div> </div> </body> </html>
.preview { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .preview-pic { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } .preview-thumbnail.nav-tabs { border: none; margin-top: 15px; } .preview-thumbnail.nav-tabs li { width: 18%; margin-right: 2.5%; } .preview-thumbnail.nav-tabs li img { max-width: 100%; display: block; } .preview-thumbnail.nav-tabs li a { padding: 0; margin: 0; } .preview-thumbnail.nav-tabs li:last-of-type { margin-right: 0; } .tab-content { overflow: hidden; } .tab-content img { width: 100%; -webkit-animation-name: opacity; animation-name: opacity; -webkit-animation-duration: .3s; animation-duration: .3s; } @keyframes opacity { 0% { opacity: 0; -webkit-transform: scale(3); transform: scale(3); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } /*# sourceMappingURL=style.css.map */

Related: See More

Paper Kit 2 PRO Angular
Compare Products
E-commerce Footer Responsive

Questions / Comments: