Bootstrap snippet: Store List

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: list,store



<div class="container"> <div class="row bootstrap snippets" id="store-list"> <div class="col-md-6 col-xs-12"> <div class="panel"> <div class="panel-body"> <div class="row"> <div class="col-sm-5"> <a href="#"><img src="http://lorempixel.com/300/300/technics/1/" class="img-responsive"></a> </div> <div class="col-sm-7"> <h4 class="title-store"> <strong><a href="#">Product name</a></strong> </h4> <hr> <p>Iki kie mung omah lodong dadiine rodo murah tur yo ra awet wong karang mung murah, nek pingin awet yo tuku omah-omahan wae sing ra iso rusak.</p> <p> <a href="#" class="btn btn-default" disabled="" data-original-title="" title="">$12,990</a> <a href="#" class="btn btn-warning pull-right" data-original-title="" title="">Buy Now</a> </p> </div> </div> </div> </div> </div> <div class="col-md-6 col-xs-12"> <div class="panel"> <div class="panel-body"> <div class="row"> <div class="col-sm-5"> <a href="#"><img src="http://lorempixel.com/300/300/technics/1/" class="img-responsive"></a> </div> <div class="col-sm-7"> <h4 class="title-store"> <strong><a href="#">Product name</a></strong> </h4> <hr> <p>Iki kie mung omah lodong dadiine rodo murah tur yo ra awet wong karang mung murah, nek pingin awet yo tuku omah-omahan wae sing ra iso rusak.</p> <p> <a href="#" class="btn btn-default" disabled="" data-original-title="" title="">$12,990</a> <a href="#" class="btn btn-warning pull-right" data-original-title="" title="">Buy Now</a> </p> </div> </div> </div> </div> </div> <div class="col-md-6 col-xs-12"> <div class="panel"> <div class="panel-body"> <div class="row"> <div class="col-sm-5"> <a href="#"><img src="http://lorempixel.com/300/300/technics/1/" class="img-responsive"></a> </div> <div class="col-sm-7"> <h4 class="title-store"> <strong><a href="#">Product name</a></strong> </h4> <hr> <p>Iki kie mung omah lodong dadiine rodo murah tur yo ra awet wong karang mung murah, nek pingin awet yo tuku omah-omahan wae sing ra iso rusak.</p> <p> <a href="#" class="btn btn-default" disabled="" data-original-title="" title="">$12,990</a> <a href="#" class="btn btn-warning pull-right" data-original-title="" title="">Buy Now</a> </p> </div> </div> </div> </div> </div> <div class="col-md-6 col-xs-12"> <div class="panel"> <div class="panel-body"> <div class="row"> <div class="col-sm-5"> <a href="#"><img src="http://lorempixel.com/300/300/technics/1/" class="img-responsive"></a> </div> <div class="col-sm-7"> <h4 class="title-store"> <strong><a href="#">Product name</a></strong> </h4> <hr> <p>Iki kie mung omah lodong dadiine rodo murah tur yo ra awet wong karang mung murah, nek pingin awet yo tuku omah-omahan wae sing ra iso rusak.</p> <p> <a href="#" class="btn btn-default" disabled="" data-original-title="" title="">$12,990</a> <a href="#" class="btn btn-warning pull-right" data-original-title="" title="">Buy Now</a> </p> </div> </div> </div> </div> </div> </div> </div>
body{ background-color: #f2f2f2; margin-top:20px; } #store-list img { width: 100%; height: 170px; border: 5px solid #ecf0f1; margin-bottom: 7px; } #store-list h4.title-store a:hover { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; color: #f1c40f; } #store-list h4.title-store a { color: #f39c12; } .btn.btn-default { border-color: #bdc3c7; background-color: #bdc3c7; border: 1px solid #bdc3c7; } .btn.btn-warning { border-color: #f1c40f; background-color: #f1c40f; border: 1px solid #f1c40f; }
Dey-Dey

Store List

Dey-Dey
  Apr 28th, 08:37
1.7K Views