Search Results with image

This bootstrap snippet called "Search Results with image" 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

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

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="container bootstrap snippet">
    <hr>
    <ol class="breadcrumb">
    	<li><a href="#">Page name</a></li>
		<li><a href="#">Search Results</a></li>
		<li class="pull-right"><a href="" class="text-muted"><i class="fa fa-refresh"></i></a></li>
	</ol>
	<div class="row">
		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    		<div class="well search-result">
        		<div class="input-group">
        		<input type="text" class="form-control" placeholder="Search">
			      <span class="input-group-btn">
			        <button class="btn btn-info btn-lg" type="button">
                        <i class="glyphicon glyphicon-search"></i>
                        Search
                    </button>
			      </span>
			    </div>
        	</div>
            <div class="well search-result">
            	<div class="row">
            		<a href="#">
                		<div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
	                    	<img class="img-responsive" src="https://lorempixel.com/400/200/sports/2/" alt="">
                		</div>
                		<div class="col-xs-6 col-sm-9 col-md-9 col-lg-10 title">
	                    	<h3>Result name one</h3>
	                    	<p>Ut quis libero id orci semper porta ac vel ante. In nec laoreet sapien. Nunc hendrerit ligula at massa sodales, ullamcorper rutrum orci semper.</p>
                		</div>
            		</a>
            	</div>
            </div>
            <div class="well search-result">
            	<div class="row">
            		<a href="#">
                		<div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
	                    	<img class="img-responsive" src="https://lorempixel.com/400/200/sports/3/" alt="">
                		</div>
                		<div class="col-xs-6 col-sm-9 col-md-9 col-lg-10 title">
	                    	<h3>Blueberry Sport</h3>
	                    	<p>Nulla rhoncus lacus tortor, vel tincidunt dolor eleifend et. Ut consequat elit quam, iaculis volutpat ipsum fermentum pulvinar. Pellentesque nec sem vel arcu ornare faucibus.</p>
                		</div>
            		</a>
            	</div>
            </div>
            <div class="well search-result">
            	<div class="row">
            		<a href="#">
                		<div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
	                    	<img class="img-responsive" src="https://lorempixel.com/400/200/sports/1/" alt="">
                		</div>
                		<div class="col-xs-6 col-sm-9 col-md-9 col-lg-10 title">
	                    	<h3>Power Thirst</h3>
	                    	<p>Cras nisi dolor, tristique id vehicula vitae, mollis at eros. Ut euismod sem eu tellus vestibulum, in facilisis est feugiat. Mauris sed leo sed erat vestibulum suscipit.</p>
                		</div>
            		</a>
            	</div>
            </div>
            <div class="row">
                <button type="button" class="btn btn-info  btn-block">
                    <i class="glyphicon glyphicon-refresh"></i>Load more...
                </button>
            </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:#eee;

}
.search-result .title h3 {
    margin: 0 0 15px;
    color: #333;
}
.search-result .title p {
    font-size: 12px;
    color: #333;
}
.well {
    border: 0;
    padding: 20px;
    min-height: 63px;
    background: #fff;
    box-shadow: none;
    border-radius: 3px;
    position: relative;
    max-height: 100000px;
    border-bottom: 2px solid #ccc;
    transition: max-height 0.5s ease;
    -o-transition: max-height 0.5s ease;
    -ms-transition: max-height 0.5s ease;
    -moz-transition: max-height 0.5s ease;
    -webkit-transition: max-height 0.5s ease;
}
.form-control {
    height: 45px;
    padding: 10px;
    font-size: 16px;
    box-shadow: none;
    border-radius: 0;
    position: relative;
}                    
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.2.0

Created: Jul 31st 2014, 18:24

Views: 7.8K

Rated 5/5 based on 8 reviews