list with description

This bootstrap snippet called "list with description" 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,media

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 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row">
	<div class="col-xs-12">
		<div class="media search-media">
			<div class="media-left">
				<a href="#">
					<img class="media-object" data-src="holder.js/72x72" alt="72x72" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2272%22%20height%3D%2272%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1544082d1c7%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1544082d1c7%22%3E%3Crect%20width%3D%2272%22%20height%3D%2272%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2217.46875%22%20y%3D%2240.5%22%3E72x72%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 72px; height: 72px;">
				</a>
			</div>

			<div class="media-body">
				<div>
					<h4 class="media-heading">
						<a href="#" class="blue">Media heading</a>
					</h4>
				</div>
				<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ...</p>

				<div class="search-actions text-center">
					<span class="text-info">$</span>
					<span class="blue bolder bigger-150">300</span>
					monthly
					<div class="action-buttons bigger-125">
						<a href="#">
							<i class="ace-icon fa fa-phone green"></i>
						</a>
						<a href="#">
							<i class="ace-icon fa fa-heart red"></i>
						</a>
						<a href="#">
							<i class="ace-icon fa fa-star orange2"></i>
						</a>
					</div>
					<a class="search-btn-action btn btn-sm btn-block btn-info">Book it!</a>
				</div>
			</div>
		</div>

		<div class="media search-media disabled">
			<div class="media-left">
				<a href="#">
					<img class="media-object" data-src="holder.js/72x72" alt="72x72" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2272%22%20height%3D%2272%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1544082d1cc%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1544082d1cc%22%3E%3Crect%20width%3D%2272%22%20height%3D%2272%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2217.46875%22%20y%3D%2240.5%22%3E72x72%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 72px; height: 72px;">
				</a>
			</div>

			<div class="media-body">
				<div>
					<h4 class="media-heading">
						<a href="#" class="blue">Media heading</a>
					</h4>
				</div>
				<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ...</p>

				<div class="search-actions text-center">
					<span class="grey">$</span>
					<span class="grey bolder bigger-125">250</span>
					monthly
					<div class="action-buttons bigger-125">
						<a href="#">
							<i class="ace-icon fa fa-phone green"></i>
						</a>
						<a href="#">
							<i class="ace-icon fa fa-heart red"></i>
						</a>
						<a href="#">
							<i class="ace-icon fa fa-star orange2"></i>
						</a>
					</div>
					<a class="search-btn-action btn btn-sm btn-block btn-grey disabled">Unavailable!</a>
				</div>
			</div>
		</div>

		<div class="media search-media">
			<div class="media-left">
				<a href="#">
					<img class="media-object" data-src="holder.js/72x72" alt="72x72" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2272%22%20height%3D%2272%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1544082d1d1%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1544082d1d1%22%3E%3Crect%20width%3D%2272%22%20height%3D%2272%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2217.46875%22%20y%3D%2240.5%22%3E72x72%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 72px; height: 72px;">
				</a>
			</div>

			<div class="media-body">
				<div>
					<h4 class="media-heading">
						<a href="#" class="blue">Media heading</a>
					</h4>
				</div>
				<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ...</p>

				<div class="search-actions text-center">
					<span class="text-info">$</span>
					<span class="blue bolder bigger-150">220</span>
					monthly
					<div class="action-buttons bigger-125">
						<a href="#">
							<i class="ace-icon fa fa-phone green"></i>
						</a>
						<a href="#">
							<i class="ace-icon fa fa-heart red"></i>
						</a>
						<a href="#">
							<i class="ace-icon fa fa-star orange2"></i>
						</a>
					</div>
					<a class="search-btn-action btn btn-sm btn-block btn-info">Book it!</a>
				</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{margin-top:20px;}

.search-media {
    border: 1px solid #ddd;
    margin-top: -1px;
    padding: 12px 150px 12px 12px;
    -webkit-transition: border .1s ease-in-out 0s;
    -o-transition: border .1s ease-in-out 0s;
    transition: border .1s ease-in-out 0s;
    position: relative
}

.search-media:hover {
    border-color: #75A8CE;
    z-index: 1
}

.search-media .search-actions {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 20%;
    min-width: 100px;
    max-width: 150px;
    padding: 6px 9px
}

.search-media .search-actions::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 16px;
    width: 1px;
    background-image: -webkit-linear-gradient(top, #FFF 0, #DDD 100%);
    background-image: -o-linear-gradient(top, #FFF 0, #DDD 100%);
    background-image: linear-gradient(to bottom, #FFF 0, #DDD 100%);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffdddddd', GradientType=0)
}

.search-media:hover .search-actions {
    background-color: #F0F4F7
}

.search-media.disabled:hover .search-actions {
    background-color: #F6F6F6
}

.search-media:not(.disabled):hover .search-actions::before {
    background-image: -webkit-linear-gradient(top, #FFF 0, #84bee5 100%);
    background-image: -o-linear-gradient(top, #FFF 0, #84bee5 100%);
    background-image: linear-gradient(to bottom, #FFF 0, #84bee5 100%);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ff84bee5', GradientType=0)
}

.search-filter-header {
    padding: 8px;
    margin: -4px
}

.search-btn-action {
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    width: auto;
    -webkit-transition: bottom .15s;
    -o-transition: bottom .15s;
    transition: bottom .15s
}

.search-media:hover .search-btn-action {
    bottom: 1px
}

.search-promotion.label {
    position: absolute;
    margin-top: -1px;
    margin-left: -1px
}

.search-filter-element {
    padding: 12px;
    background-color: #FFF;
    border: 1px solid #C9DDE7
}

.search-results {
    padding: 24px 12px;
    min-height: 20px
}

.search-result {
    margin-top: -1px;
    position: relative;
    padding: 12px;
    border: 1px dotted;
    border-color: #DDD #FFF #FFF;
    border-color: rgba(0, 0, 0, .11) transparent transparent
}

.search-result:hover {
    background-color: #F7F7F7;
    border-color: #D6E1EA;
    border-style: solid;
    z-index: 1
}

.search-result:first-child {
    border-top-color: transparent
}

.search-result:first-child:hover {
    border-top-color: #D6E1EA
}

.search-result .search-title {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 6px
}

.search-result .search-content {
    margin-top: 2px
}

.btn-grey.disabled, .btn-grey.disabled.active, .btn-grey.disabled:active, .btn-grey.disabled:focus, 
.btn-grey.disabled:hover, .btn-grey[disabled], .btn-grey[disabled].active, .btn-grey[disabled]:active, 
.btn-grey[disabled]:focus, .btn-grey[disabled]:hover, fieldset[disabled] .btn-grey, fieldset[disabled] .btn-grey.active, 
fieldset[disabled] .btn-grey:active, fieldset[disabled] .btn-grey:focus, fieldset[disabled] .btn-grey:hover {
    background-color: #A0A0A0!important;
    border-color: #A0A0A0;
    color:#fff;
}


.dark {
    color: #333!important
}

.white {
    color: #FFF!important
}

.red {
    color: #DD5A43!important
}

.red2 {
    color: #E08374!important
}

.light-red {
    color: #F77!important
}

.blue {
    color: #478FCA!important
}

.light-blue {
    color: #93CBF9!important
}

.green {
    color: #69AA46!important
}

.light-green {
    color: #B0D877!important
}

.orange {
    color: #FF892A!important
}

.orange2 {
    color: #FEB902!important
}

.light-orange {
    color: #FCAC6F!important
}

.purple {
    color: #A069C3!important
}

.pink {
    color: #C6699F!important
}

.pink2 {
    color: #D6487E!important
}

.brown {
    color: brown!important
}

.grey {
    color: #777!important
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 22nd 2016, 19:34

Views: 3.4K

Rated 5/5 based on 3 reviews