<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="col-md-3"></div>
<div class="col-md-2">
<div class="panel panel-default">
<h5 class="header">SPOTLIGHT</h5>
<hr>
<div id="spotlight">
<div class="panel-body text-left">
<div class="row">
<div class="col-md-12 strechImage">
<a class="" href="#">
<img class="img-thumbnail" src="http://www.rowthree.com/wp-content/uploads/2010/01/bennyaffleck.jpg">
</a>
</div>
<div class="col-md-12">
<h5 class="personName">Ben Affleck</h5>
<p class="personTitle">Investment Analyst</p>
<p class="personDesc">He began his career as a child actor, starring in the PBS educational series The Voyage of the Mimi</p>
</div>
</div>
<div class=" pagination-large">
<ul class="pager" data-key="0"></ul>
</div>
</div>
<div id="IdFooter" class="panel-footer text-right">
<button type="button" class="btn btn-primary btn-round-xs btn-xs">Show More</button>
</div>
<div class="panel-body text-left">
<div class="row">
<div class="col-md-12 strechImage">
<a class="" href="#">
<img class="img-thumbnail" src="http://www.rowthree.com/wp-content/uploads/2010/01/bennyaffleck.jpg">
</a>
</div>
<div class="col-md-12">
<h5 class="personName">Ben Affleck</h5>
<p class="personTitle">Investment Analyst</p>
<p class="personDesc">He began his career as a child actor, starring in the PBS educational series The Voyage of the Mimi</p>
</div>
</div>
<div class=" pagination-large">
<ul class="pager" data-key="0"></ul>
</div>
</div>
<div id="IdFooter" class="panel-footer text-right">
<button type="button" class="btn btn-primary btn-round-xs btn-xs">Show More</button>
</div>
<div class="panel-body text-left">
<div class="row">
<div class="col-md-12 strechImage">
<a class="" href="#">
<img class="img-thumbnail" src="http://www.rowthree.com/wp-content/uploads/2010/01/bennyaffleck.jpg">
</a>
</div>
<div class="col-md-12">
<h5 class="personName">Ben Affleck</h5>
<p class="personTitle">Investment Analyst</p>
<p class="personDesc">He began his career as a child actor, starring in the PBS educational series The Voyage of the Mimi</p>
</div>
</div>
<div class=" pagination-large">
<ul class="pager" data-key="0"></ul>
</div>
</div>
<div id="IdFooter" class="panel-footer text-right">
<button type="button" class="btn btn-primary btn-round-xs btn-xs">Show More</button>
</div>
</div>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>
.panel-heading {
padding: 10px 15px;
background-color: #353535;
border-top: 1px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
position: absolute;
top: 0%;
cursor:pointer;
opacity:0.8;
color:white;
border:none;
}
.panel-body .row {
margin-top: -15px;
}
.pager li
{
padding-right:2px;
font-size: 0.8em;
color: #820000;
font-weight: 700;
}
.panel-footer {
background-color: #fff;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
padding: 10px 15px;
border-top: 0px solid #fff;
}
.header
{
padding-left:10px;
}
.pager{
margin:0px;
}
.next
{
padding-left:5px !important;
}
.previous
{
padding-right:5px !important;
}
.box {
padding:2%;
border:1px #ddd solid;
cursor:pointer;
}
.remove-decoration {
text-decoration:none !important;
color:#333;
font-size:12px;
}
.panel-default h5
{
font-weight: 600;
}
hr{
border : 0;
height: 3px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
width:90%;
margin-top: 0px;
}
.img-thumbnail{
display: inline-block;
max-width: 100%;
height: auto;
line-height: 1.42857;
background-color: rgb(255, 255, 255);
padding: 0px;
border-width: 0px;
border-style: solid;
border-color: rgb(221, 221, 221);
border-image: initial;
border-radius: 1px;
transition: all 0.2s ease-in-out;
}
.strechImage
{
padding:2px 2px !important;
}
.strechImage img
{
height:120px;
}
.personName {
font-weight: bold !important;
color: #820000 !important;
text-transform: uppercase;
font-size:0.9em;
}
.personDesc
{
font-size:0.7em;
margin-top:-3px;
}
#IdFooter .btn-primary
{
background-color: #820000;
border-color: #820000;
font-weight: 600;
font-stretch: semi-expanded;
text-transform: uppercase;
font-size:0.7em;
}
.personTitle{
margin-top: -10px !important;
font-size: 0.7em;
font-weight: 700;
}
.btn-round-xs{
border-radius: 11px;
padding-left: 25px;
padding-right: 25px;
}
var listElement = $('#spotlight').length;
var numItems = listElement.children().length;
console.log(listElement);
