Search Results

This bootstrap snippet called "Search Results" 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: bootstrap,snippet,search,result,list,3.2.0

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 bootstrap snippet">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <h2>
                        160 results found for: <span class="text-navy">"Bootdey"</span>
                    </h2>
                    <small>Request time  (0.23 seconds)</small>
        
                    <div class="search-form">
                        <form action="#" method="get">
                            <div class="input-group">
                                <input type="text" placeholder="Bootdey" name="search" class="form-control input-lg">
                                <div class="input-group-btn">
                                    <button class="btn btn-lg btn-primary" type="submit">
                                        Search
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="search-result">
                        <h3><a href="#">Bootdey</a></h3>
                        <a href="#" class="search-link">www.bootdey.com</a>
                        <p>

                        </p>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="search-result">
                        <h3><a href="#">Bootdey</a></h3>
                        <a href="#" class="search-link">https://bootdey.com/</a>
                        <p>
                          Bootdey is a gallery of free snippets resources templates and utilities for bootstrap css hmtl js framework. Codes for developers and web designers
                        </p>
                    </div>
                    <div class="hr-line-dashed"></div>

                    <div class="search-result">
                        <h3><a href="#">Bootdey | Facebook</a></h3>
                        <a href="#" class="search-link">https://www.facebook.com/bootdey</a>
                        <p>
                           Bootdey is a gallery of free snippets resources templates and utilities for bootstrap css hmtl js framework. Codes for developers and web designers
                        </p>
                    </div>
                    <div class="hr-line-dashed"></div>

                    <div class="search-result">
                        <h3><a href="#">Bootdey | Twitter</a></h3>
                        <a href="#" class="search-link">www.twitter.com/bootdey</a>
                        <p>
                            Bootdey is a gallery of free snippets resources templates and utilities for bootstrap css hmtl js framework. Codes for developers and web designers
                        </p>
                    </div>
                    <div class="hr-line-dashed"></div>
                    
                    <div class="text-center">
                        <div class="btn-group">
                            <button class="btn btn-white" type="button"><i class="glyphicon glyphicon-chevron-left"></i></button>
                            <button class="btn btn-white">1</button>
                            <button class="btn btn-white  active">2</button>
                            <button class="btn btn-white">3</button>
                            <button class="btn btn-white">4</button>
                            <button class="btn btn-white">5</button>
                            <button class="btn btn-white">6</button>
                            <button class="btn btn-white">7</button>
                            <button class="btn btn-white" type="button"><i class="glyphicon glyphicon-chevron-right"></i> </button>
                        </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


                        
.ibox-content {
    background-color: #FFFFFF;
    color: inherit;
    padding: 15px 20px 20px 20px;
    border-color: #E7EAEC;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0px;
}

.search-form {
    margin-top: 10px;
}

.search-result h3 {
    margin-bottom: 0;
    color: #1E0FBE;
}

.search-result .search-link {
    color: #006621;
}

.search-result p {
    font-size: 12px;
    margin-top: 5px;
}

.hr-line-dashed {
    border-top: 1px dashed #E7EAEC;
    color: #ffffff;
    background-color: #ffffff;
    height: 1px;
    margin: 20px 0;
}

h2 {
    font-size: 24px;
    font-weight: 100;
}

                    
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.2.0

Created: Aug 6th 2014, 20:57

Views: 18.4K

Rated 5/5 based on 2 reviews