Store List

This bootstrap snippet called "Store List" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: list,store

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<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="https://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="https://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="https://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="https://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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


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;
}


                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 3rd 2016, 21:43

Views: 2.8K

Rated 5/5 based on 1 reviews