<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <br> <br> <div class="container"> <div class="row"> <div class="panel panel-primary"> <div class="panel-heading" style="padding: 3px;"> <h3 style="padding: 0px;"> Private Label <div class="controls pull-right"> <a class="left fa fa-chevron-left btn btn-default" href="#carousel-example" data-slide="prev"></a> <a class="right fa fa-chevron-right btn btn-default" href="#carousel-example"data-slide="next"></a> </div> </h3> </div> <div class="panel-body"> <div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://immediatenet.com/t/fs?Size=1024x768&URL=http://theheartofdallasbowl.com/"> </div> <div class="info"> <div class="row"> <div class="price col-md-12"> <h5> tuliptime </h5> <h5 class="price-text-color"> tix2 </h5> </div> </div> <div class="separator clear-left"> <button class="btn btn-primary btn-sm pull-left" role="button"> <div class="fa fa-rocket"></div> <div class="icon-label">Launch</div> </button> <button class="btn btn-primary btn-sm pull-right" role="button"> <div class="fa fa-envelope"></div> <div class="icon-label">Email</div> </button> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://immediatenet.com/t/l?Size=1024x768&URL=http://theheartofdallasbowl.com"> </div> <div class="info"> <div class="row"> <div class="price col-md-12"> <h5> sunsetcenter </h5> <h5 class="price-text-color"> tix </h5> </div> </div> <div class="separator clear-left"> <button class="btn btn-primary btn-sm pull-left" role="button"> <div class="fa fa-rocket"></div> <div class="icon-label">Launch</div> </button> <button class="btn btn-primary btn-sm pull-right" role="button"> <div class="fa fa-envelope"></div> <div class="icon-label">Email</div> </button> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://immediatenet.com/t/fs?Size=1024x768&URL=http://www.diamondjacks.tix.com"> </div> <div class="info"> <div class="row"> <div class="price col-md-12"> <h5> diamondjacks </h5> <h5 class="price-text-color"> tix </h5> </div> </div> <div class="separator clear-left"> <button class="btn btn-primary btn-sm pull-left" role="button"> <div class="fa fa-rocket"></div> <div class="icon-label">Launch</div> </button> <button class="btn btn-primary btn-sm pull-right" role="button"> <div class="fa fa-envelope"></div> <div class="icon-label">Email</div> </button> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://immediatenet.com/t/l?Size=1024x768&URL=http://www.calistogaballoons.tix.com"> </div> <div class="info"> <div class="row"> <div class="price col-md-12"> <h5> calistogaballoons </h5> <h5 class="price-text-color"> tix </h5> </div> </div> <div class="separator clear-left"> <button class="btn btn-primary btn-sm pull-left" role="button"> <div class="fa fa-rocket"></div> <div class="icon-label">Launch</div> </button> <button class="btn btn-primary btn-sm pull-right" role="button"> <div class="fa fa-envelope"></div> <div class="icon-label">Email</div> </button> </div> <div class="clearfix"> </div> </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-3"> <div class="col-item"> <div class="photo"> <img src="http://immediatenet.com/t/l?Size=1024x768&URL=http://www.weathervaneplayhouse.tix.com"> </div> <div class="info"> <div class="row"> <div class="price col-md-12"> <h5> weathervaneplayhouse</h5> <h5 class="price-text-color"> tix</h5> </div> </div> <div class="separator clear-left"> <p class="btn-add"> <i class="fa fa-envelope"></i><a href=" " class="hidden-sm">Email</a></p> <p class="btn-details"> <i class="fa fa-rocket"></i><a href="http://www.weathervaneplayhouse.tix.com" class="hidden-sm">Launch</a></p> </div> <div class="clearfix"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css); .col-item { border: 2px solid #E1E1E1; border-radius: 5px; background: #FFF; } .col-item .photo img { border: 2px solid white; margin: 0 auto; width: 100%; } .col-item .info { padding: 10px; border-radius: 0 0 5px 5px; margin-top: 1px; } .col-item:hover .info { background-color: #F5F5DC; } .col-item .price { float: left; margin-top: 5px; } .col-item .price h5 { line-height: 20px; margin: 0; } .price-text-color { color: #219FD1; } .col-item .info .rating { color: #777; } .col-item .rating { float: left; font-size: 17px; text-align: right; line-height: 52px; margin-bottom: 10px; height: 52px; } .col-item .separator { border-top: 1px solid #E1E1E1; } .clear-left { clear: left; } .col-item .separator p { line-height: 20px; margin-bottom: 0; margin-top: 10px; text-align: center; } .col-item .separator p i { margin-right: 5px; } .col-item .btn-add { width: 50%; float: left; } .col-item .btn-add { border-right: 1px solid #E1E1E1; } .col-item .btn-details { width: 50%; float: left; padding-left: 10px; } .controls { margin: 0px; padding:0px; } [data-slide="prev"] { margin-right: 10px; } .col-item .btn { margin-top: 5px; width: 45%; height: 5%; padding: 7px; }