"eCommerce Product Detail"
Bootstrap 3.3.0 Snippet by uthmansy

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="http://placekitten.com/400/252" /></div> <div class="tab-pane" id="pic-2"><img src="http://placekitten.com/400/252" /></div> <div class="tab-pane" id="pic-3"><img src="http://placekitten.com/400/252" /></div> <div class="tab-pane" id="pic-4"><img src="http://placekitten.com/400/252" /></div> <div class="tab-pane" id="pic-5"><img src="http://placekitten.com/400/252" /></div> </div> <ul class="preview-thumbnail nav nav-tabs"> <li class="active"><a data-target="#pic-1" data-toggle="tab"><img src="http://placekitten.com/200/126" /></a></li> <li><a data-target="#pic-2" data-toggle="tab"><img src="http://placekitten.com/200/126" /></a></li> <li><a data-target="#pic-3" data-toggle="tab"><img src="http://placekitten.com/200/126" /></a></li> <li><a data-target="#pic-4" data-toggle="tab"><img src="http://placekitten.com/200/126" /></a></li> <li><a data-target="#pic-5" data-toggle="tab"><img src="http://placekitten.com/200/126" /></a></li> </ul> </div> <div class="details col-md-6"> <h3 class="product-title">men's shoes fashion</h3> <div class="rating"> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> </div> <span class="review-no">41 reviews</span> </div> <p class="product-description">Suspendisse quos? Tempus cras iure temporibus? Eu laudantium cubilia sem sem! Repudiandae et! Massa senectus enim minim sociosqu delectus posuere.</p> <h4 class="price">current price: <span>$180</span></h4> <p class="vote"><strong>91%</strong> of buyers enjoyed this product! <strong>(87 votes)</strong></p> <h5 class="sizes">sizes: <span class="size" data-toggle="tooltip" title="small">s</span> <span class="size" data-toggle="tooltip" title="medium">m</span> <span class="size" data-toggle="tooltip" title="large">l</span> <span class="size" data-toggle="tooltip" title="xtra large">xl</span> </h5> <h5 class="colors">colors: <span class="color orange not-available" data-toggle="tooltip" title="Not In store"></span> <span class="color green"></span> <span class="color blue"></span> </h5> <div class="action"> <button class="add-to-cart btn btn-default" type="button">add to cart</button> <button class="like btn btn-default" type="button"><span class="fa fa-heart"></span></button> </div> </div> </div> </div> </div> </div> </body> </html>
/*****************globals*************/ body { font-family: 'open sans'; overflow-x: hidden; } img { max-width: 100%; } .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; } @media screen and (max-width: 996px) { .preview { margin-bottom: 20px; } } .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; } .card { margin-top: 50px; background: #eee; padding: 3em; line-height: 1.5em; } @media screen and (min-width: 997px) { .wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } .details { 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; } .colors { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } .product-title, .price, .sizes, .colors { text-transform: UPPERCASE; font-weight: bold; } .checked, .price span { color: #ff9f1a; } .product-title, .rating, .product-description, .price, .vote, .sizes { margin-bottom: 15px; } .product-title { margin-top: 0; } .size { margin-right: 10px; } .size:first-of-type { margin-left: 40px; } .color { display: inline-block; vertical-align: middle; margin-right: 10px; height: 2em; width: 2em; border-radius: 2px; } .color:first-of-type { margin-left: 20px; } .add-to-cart, .like { background: #ff9f1a; padding: 1.2em 1.5em; border: none; text-transform: UPPERCASE; font-weight: bold; color: #fff; -webkit-transition: background .3s ease; transition: background .3s ease; } .add-to-cart:hover, .like:hover { background: #b36800; color: #fff; } .not-available { text-align: center; line-height: 2em; } .not-available:before { font-family: fontawesome; content: "\f00d"; color: #fff; } .orange { background: #ff9f1a; } .green { background: #85ad00; } .blue { background: #0076ad; } .tooltip-inner { padding: 1.3em; } @-webkit-keyframes opacity { 0% { opacity: 0; -webkit-transform: scale(3); transform: scale(3); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @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
Bootstrap 4 and CCS3 Product Cards with Transition
Product Detail Page - Ecommerce
eCommerce Quick view Popup & Product row

Questions / Comments:

Guys could anyone send me the code via E-mail ? i can't see it i guess the website is buging !

mrvishnupriya06@gmail.com

VishnuVignesh (0) - 5 years ago - Reply 0

Can anyone send me code via E-mail ?? Image effects are not working ?

umadjawed1993@gmail.com

umad (-2) - 5 years ago - Reply -2

,''

Thalitha-hub () - 3 years ago - Reply 0

,''

Thalitha-hub () - 3 years ago - Reply 0

Hello

Can anyone send me this code through my email igo4ingyinoo@gmail.com or here ?

ingyin () - 3 years ago - Reply 0

Hello

Can anyone send me this code through my email or here ?

ingyin () - 3 years ago - Reply 0

Hello Can anyone send me this code through my email or here ?

ingyin () - 3 years ago - Reply 0

thank you...

free2idol (-1) - 3 years ago - Reply 0

Hola, al dar clic en la imagen 3, estas empiezan a remontarse, ¿tu me puedes guiar? o si me puedes compartir el código de verdad te lo agradecería.

lcardona () - 4 years ago - Reply 0

when um using this, I was changed the details of model according to my purpose and copy & pasted it again and tried to change the content. but content is not changing.. why is that??? I cant use same model in another place by copying because content is not changing..

satha () - 6 years ago - Reply 0

when um using this, I was changed this details of model according to my purpose and copy & pasted it again and tried to change the content. but content is not changing.. why is that???

satha () - 6 years ago - Reply 0

Hi,
menu icon's not proper display please check & add this css in you css file

.dropdown-menu .glyphicon {
position: absolute;
right: 20px;
top: 13px;
}

Pal () - 7 years ago - Reply 0

good

Nguyên Minh () - 7 years ago - Reply 0

thanks

shuaib uthman () - 7 years ago - Reply 0

Guys could anyone send me the code via E-mail ? i can't see it i guess the website is buging !
benabdessalemoussama@gmail.com

oussama () - 7 years ago - Reply 0

sent!!!

shuaib uthman () - 7 years ago - Reply 0

If you like this, check my work here https://themeforest.net/ite...

shuaib uthman () - 7 years ago - Reply 0

nice work.. bro is it possible to create thumbanil scroller .. now you added 5 image if i added more than 5 how it will work

shamseer () - 7 years ago - Reply 0

well! i guess you gonna have to use a carousel framework like "owl carousel" or "slick carousel" for the thumbnail... here i only used standard bootstrap native tabs.... cheers

shuaib uthman () - 7 years ago - Reply 0

Great work...See here some awesome bootstrap design in my website i am using in it anyone can take example with my website for them....
here is the ref link... and thanks to bootsnipp where i found most beautiful design
http://kalarikendramdelhi.com/

Web Enlance () - 7 years ago - Reply 0

Thanks for sharing

shuaib uthman () - 7 years ago - Reply 0

hi, am facing a problem when i run on my local pc. it is not working ...

faisal () - 7 years ago - Reply 0

Make sure Javascript is enabled and all necessary libraries like bootstrap.js, jQuery are all loaded if you are using the code outside of Bootsnipp. cheers!!

shuaib uthman () - 7 years ago - Reply 0

Thanks a lot

Kenshinman () - 7 years ago - Reply 0

Ur Welcome :)

shuaib uthman () - 7 years ago - Reply 0

Good Job! Thanks for sharing!
I changed the Bootstrap links for JS/JQuery from HTTP to HTTPS

Salim () - 7 years ago - Reply 0

thanks am glad you like it :) salim

shuaib uthman () - 7 years ago - Reply 0

Very nice, thanks for sharing.

Cris () - 7 years ago - Reply 0

thanks am glad :)

shuaib uthman () - 7 years ago - Reply 0

How do you get rid of the animations?

Callum () - 7 years ago - Reply 0

just remove these lines of code

.tab-content img {
width: 100%;
-webkit-animation-name: opacity;
animation-name: opacity;
-webkit-animation-duration: .3s;
animation-duration: .3s; }

shuaib uthman () - 7 years ago - Reply 0

The best

hadi swaleh () - 8 years ago - Reply 0

thanks for stopping by am glad you like it :)

shuaib uthman () - 7 years ago - Reply 0