<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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">
<div class="row">
<div class="col-md-6 list-category text-primary">
<h3 class="title">
Category Primary
<a href="#" class="btn btn-xs btn-primary pull-right">30 Articles</a>
</h3>
<div class="list-group">
<a href="#" class="list-group-item"><div class="truncate pull-left">Option One - Primary</div><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><div class="truncate pull-left">Option Two - Primary</div><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><div class="truncate pull-left">Option Three - Primary</div><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><div class="truncate pull-left">Option Four - Primary</div><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><div class="truncate pull-left">Option Five - Primary</div><span class="badge">14 views</span></a>
</div>
<span class="list-footer">
<a href="#" class="btn btn-sm btn-primary">View All</a>
</span>
</div>
<div class="col-md-6 list-category text-danger">
<h3 class="title">
Category Danger
<a href="#" class="btn btn-xs btn-danger pull-right">36 Articles</a>
</h3>
<div class="list-group">
<a href="#" class="list-group-item"><span class="truncate pull-left">Item One</span><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><span class="truncate pull-left">Item One</span><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><span class="truncate pull-left">Item One</span><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><span class="truncate pull-left">Item One</span><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><span class="truncate pull-left">Item One</span><span class="badge">14 views</span></a>
</div>
<span class="list-footer">
<a href="#" class="btn btn-sm btn-danger">View All</a>
</span>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-6 list-category text-info">
<h3 class="title">
Category Info
<span class="label label-info pull-right">360 Articles</span>
</h3>
<div class="list-group">
<a href="#" class="list-group-item"><div class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</div><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><div class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</div><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><div class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</div><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><div class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</div><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><div class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</div><span class="badge">14 views</span></a>
</div>
<a href="#" class="btn btn-info btn-outline">View All</a>
<hr >
</div>
<div class="col-md-6 list-category text-success">
<h3 class="title ">
Category Success
<span class="label label-success pull-right">360 Articles</span>
</h3>
<div class="list-group">
<a href="#" class="list-group-item"><span class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</span><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><span class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</span><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><span class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</span><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><span class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</span><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><span class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</span><span class="badge">14 views</span></a>
</div>
<a href="#" class="btn btn-success btn-outline">View All</a>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-6 list-category text-default">
<h3 class="title">
Category Default
<span class="label label-default pull-right">16 Articles</span>
</h3>
<div class="list-group">
<a href="#" class="list-group-item"><div class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</div><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><div class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</div><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><div class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</div><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><div class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</div><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><div class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</div><span class="badge">14 views</span></a>
</div>
<a href="#" class="btn btn-default">View All</a>
<hr >
</div>
<div class="col-md-6 list-category text-default">
<h3 class="title ">
Category Default
<span class="label label-default pull-right">16 Articles</span>
</h3>
<div class="list-group">
<a href="#" class="list-group-item"><span class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</span><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><span class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</span><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><span class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</span><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><span class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</span><span class="badge">14 views</span></a>
<a href="#" class="list-group-item"><span class="truncate pull-left">Very Long Item List 1 Very Long Item List 2 Very Long Item List 3 Very Long Item List 4</span><span class="badge">14 views</span></a>
</div>
<a href="#" class="btn btn-success">View All</a>
<hr">
</div>
</div>
</div>
/* this is the bit that gives the border color */
div.list-category h3.title
{
display: block;
padding: 14px 0 15px 0;
font-size: 20px;
font-weight: 100;
margin-bottom: 0px;
border-bottom: 1px solid;
}
div.list-category span.list-footer
{
display: block;
padding: 14px 0 15px 0;
font-size: 20px;
font-weight: 100;
margin-bottom: 0px;
border-bottom: 1px solid;
}
/* removes the border at the top of the list so it doesnt cover up the border above */
div.list-category a.list-group-item:first-child
{
border-top: 0;
}
div.list-category .list-footer
{
margin-top:-15px;
}
div.list-category a.list-group-item
{
border-left: 0;
border-right: 0;
border-radius: 0;
border-bottom: 1px solid #E0E4E9;
color: #4c4c4c;
text-decoration: none;
padding-left: 0;
padding-right: 0;
overflow: hidden;
}
.truncate
{
width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
