<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="item-container"> <div class="container"> <div class="col-md-12"> <div class="container service1-items col-sm-2 col-md-2 pull-left"> <center> <a id="item-1" class="service1-item"> <img src="http://www.corsair.com/Media/catalog/product/g/s/gs600_psu_sideview_blue_2.png" alt=""></img> </a> </center> </div> </div> <div class="col-md-7"> <div class="product-title">Almost all smartphones sold today have the same two flaws -- and the cases you're buying prove it</div> </div> </div> <div class="container"> <div class="pull-right"><span>BY: Harvest Fund</span></div> </div> </div> </div>

/********************************************* Call Bootstrap *********************************************/ @import url("bootstrap/bootstrap.min.css"); /********************************************* Theme Elements *********************************************/ .gold{ color: #FFBF00; } /********************************************* PRODUCTS *********************************************/ .product{ border: 1px solid #dddddd; height: 321px; } .product>img{ max-width: 230px; } .product-rating{ font-size: 20px; margin-bottom: 25px; } .product-title{ font-size: 20px; } .product-desc{ font-size: 14px; } .product-price{ font-size: 22px; } .product-stock{ color: #74DF00; font-size: 20px; margin-top: 10px; } .product-info{ margin-top: 50px; } /********************************************* VIEW *********************************************/ .content-wrapper { max-width: 1140px; background: #fff; margin: 0 auto; margin-top: 25px; margin-bottom: 10px; border: 0px; border-radius: 0px; } .container-fluid{ max-width: 1140px; margin: 0 auto; } .view-wrapper { float: right; max-width: 70%; margin-top: 25px; } .container { padding-left: 0px; padding-right: 0px; max-width: 100%; } /********************************************* ITEM *********************************************/ .service1-items { padding: 0px 0 0px 0; float: left; position: relative; overflow: hidden; max-width: 100%; height: auto; width: 130px; } .service1-item { height: 107px; width: 120px; display: block; float: left; position: relative; padding-right: 20px; border: 1px solid #DDD; } .service1-item > img { max-height: 110px; max-width: 110px; opacity: 0.6; transition: all .2s ease-in; -o-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -webkit-transition: all .2s ease-in; } .service1-item > img:hover { cursor: pointer; opacity: 1; } .service-image-left { padding-right: 50px; } .service-image-right { padding-left: 50px; } .service-image-left > center > img,.service-image-right > center > img{ max-height: 155px; } /** */ .item-by { padding-right: 20px; float: right; width: 100%; }