"product details page"
Bootstrap 4.0.0 Snippet by nastasia

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 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>Book 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"> <ul class="preview-pic tab-content"> <li class="tab-pane active" id="pic-1"><img src="1q84.jpg" /></div> </ul> </div> <div class="details col-md-6"> <h3 class="product-title">Book details</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">This book is about hmm i dont know cus i never read this book before.</p> <h4 class="price">Current price: <span>RM40</span></h4> <p class="vote"><strong>91%</strong> of buyers enjoyed this product! <strong>(87 votes)</strong></p> <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>

Related: See More

Vue Material Kit
Bootstrap 4 and CCS3 Product Cards with Transition
Elegant Login Page
My Awesome Login Page

Questions / Comments: