<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.jssocials/1.4.0/jssocials.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.jssocials/1.4.0/jssocials.css" /> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.jssocials/1.4.0/jssocials-theme-plain.css" /> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <div class="row"> <div class="col-xs-12 col-sm-5 col-md-5"> <div class="product_img"><img src="https://images.vexels.com/media/users/3/128885/isolated/preview/62112c9b15fb4bf9e38567d6e436b2dd-tesla-car-svg-by-vexels.png" alt="rbm_single_commerce_01" width="400"></div> </div> <div class="col-xs-12 col-sm-7 col-md-7"> <div class="details-product"> <h1>{{name-of-product}}</h1> <small>Published by: <a href="">Company</a></small> <ul class="stars"> <li><span class="fa fa-star"></span></li> <li><span class="fa fa-star"></span></li> <li><span class="fa fa-star"></span></li> <li><span class="fa fa-star-half-o"></span></li> <li><span class="fa fa-star-o"></span></li> <li><a href="#"><label class="label label-info">Vote</label></a></li> </ul> <h2>$130.00</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa.</p> <h3>Share with your friends</h3> <div id="share"></div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div>

.details-product > ul { padding: 0; margin: 10px 0; list-style-type: none; } .details-product > ul > li { display: inline-block; } .details-product > ul { padding: 0; margin: 10px 0; list-style-type: none; } .details-product { padding: 20px 20px 10px; } .product_img > img { width: 100%; } .details-product > p{ text-align: justify; } .stars> li { color: #a07634; }

$(document).ready(function(){ $("#share").jsSocials({ shares: ["email", "twitter", "facebook", "googleplus", "linkedin", "pinterest", "stumbleupon", "whatsapp"] }); $("#share").css("font-size", 12); });