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 id="content" class="container">
<div class="panel panel-default">
<div class="panel-body">
<h6 class="nomargin">
About 1,280 results <small class="text-success">(0.45 seconds) </small>
</h6>
<hr class="nomargin-bottom margin-top-10">
<!-- SEARCH RESULTS -->
<div class="clearfix search-result"><!-- item -->
<h4><a href="#">Admin – fully responsive webapp</a></h4>
<small class="text-success">www.stepofweb.com/</small>
<p>Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
</div><!-- /item -->
<div class="clearfix search-result"><!-- item -->
<h4><a href="#">Admin – fully responsive webapp</a></h4>
<small class="text-danger">Dashboard / About</small>
<p>Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
</div><!-- /item -->
<div class="clearfix search-result"><!-- item -->
<h4><a href="#">Admin – fully responsive webapp</a></h4>
<small class="text-success">Dashboard / Gallery</small>
<p>June 29, 2014 - Uploaded by Melisa Doe</p>
</div><!-- /item -->
<div class="clearfix search-result"><!-- item -->
<h4><a href="#">Admin – fully responsive webapp</a></h4>
<small class="text-success">www.stepofweb.com/</small>
<p>Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
</div><!-- /item -->
<div class="clearfix search-result"><!-- item -->
<h4><a href="#">Admin – fully responsive webapp</a></h4>
<small class="text-success">Dashboard / About</small>
</div><!-- /item -->
<div class="clearfix search-result"><!-- item -->
<h4><a href="#">Admin – fully responsive webapp</a></h4>
<small class="text-success">www.stepofweb.com/</small>
<p>Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
</div><!-- /item -->
<div class="clearfix search-result"><!-- item -->
<h4><a href="#">Admin – fully responsive webapp</a></h4>
<small class="text-success">Dashboard / About</small>
<p>Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
</div><!-- /item -->
<!-- /SEARCH RESULTS -->
<!-- PAGINATION -->
<div class="text-center margin-top-20">
<ul class="pagination">
<li class="disabled"><a href="#">Previous</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
<!-- /PAGINATION -->
</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;
background:#eee;
}
/** Page Search
*************************************************** **/
.search-result {
padding:20px 0;
border-bottom:#eee 1px solid;
}
.search-result h4 {
margin:0;
line-height:20px;
}
.search-result p {
font-size:12px;
margin:0; padding:0;
}
.search-result img {
float:left;
margin-right:10px;
margin-top:6px;
}
/** 17. Panel
*************************************************** **/
/* pannel */
.panel {
position:relative;
background:transparent;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.panel.fullscreen .accordion .panel-body,
.panel.fullscreen .panel-group .panel-body {
position:relative !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
}
.panel.fullscreen .panel-footer {
position:absolute;
bottom:0;
left:0;
right:0;
}
.panel>.panel-heading {
text-transform: uppercase;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.panel>.panel-heading small {
text-transform:none;
}
.panel>.panel-heading strong {
font-family:Arial,Helvetica,Sans-Serif;
}
.panel>.panel-heading .buttons {
display:inline-block;
margin-top:-3px;
margin-right:-8px;
}
.panel-default>.panel-heading {
padding: 15px 15px;
background:#fff;
}
.panel-default>.panel-heading small {
color:#9E9E9E;
font-size:12px;
font-weight:300;
}
.panel-clean {
border: 1px solid #ddd;
border-bottom: 3px solid #ddd;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.panel-clean>.panel-heading {
padding: 11px 15px;
background:#fff !important;
color:#000;
border-bottom: #eee 1px solid;
}
.panel>.panel-heading .btn {
margin-bottom: 0 !important;
}
.panel>.panel-heading .progress {
background-color:#ddd;
}
.panel>.panel-heading .pagination {
margin:-5px;
}
.panel-default {
border:0;
}
.panel-light {
border:rgba(0,0,0,0.1) 1px solid;
}
.panel-light>.panel-heading {
padding: 11px 15px;
background:transaprent;
border-bottom:rgba(0,0,0,0.1) 1px solid;
}
.panel-heading a.opt>.fa {
display: inline-block;
font-size: 14px;
font-style: normal;
font-weight: normal;
margin-right: 2px;
padding: 5px;
position: relative;
text-align: right;
top: -1px;
}
.panel-heading>label>.form-control {
display:inline-block;
margin-top:-8px;
margin-right:0;
height:30px;
padding:0 15px;
}
.panel-heading ul.options>li>a {
color:#999;
}
.panel-heading ul.options>li>a:hover {
color:#333;
}
.panel-title a {
text-decoration:none;
display:block;
color:#333;
}
.panel-body {
background-color:#fff;
padding: 15px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.panel-body.panel-row {
padding:8px;
}
.panel-footer {
font-size:12px;
border-top:rgba(0,0,0,0.02) 1px solid;
background-color:rgba(0255,255,255,1);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.text-default {
color:#c6c6c6 !important;
}
.text-danger {
color:#b92c28 !important;
}
.text-warning {
color:#e38d13 !important;
}
.text-info {
color:#28a4c9 !important;
}
.text-primary {
color:#245580 !important;
}
.text-success {
color:#02B700 !important;
}
Information about this bootstrap snippet
Creator: Dey Dey
Bootstrap version: 3.3.6
Created: Apr 7th 2016, 23:02
Views: 2.6K
Rated 5/5
based on 1 reviews