<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-header">
<div class="card-title">Activity</div>
</div>
<div class="card-body">
<ul>
<li class="activity-list d-flex">
<div class="activity-time pt-3 pr-3">
<p class="date m-0">10:30 am</p>
<span class="badge shade-red">75%</span>
</div>
<div class="py-3">
<h5>Admin Dashboard Template</h5>
<p>by Elnathan Lois</p>
<div class="badge red">8 hours left</div>
</div>
</li>
<li class="activity-list d-flex">
<div class="activity-time pt-3 pr-3">
<p class="date m-0">11:30 am</p>
<span class="badge shade-primary">50%</span>
</div>
<div class="py-3">
<h5>Admin Dashboard</h5>
<p>by Patrobus Nicole</p>
<div class="stacked-images my-2">
<img src="https://www.bootstrap.gallery/demos/nexus-admin-dashboard/assets/images/user5.png" alt="Admin Templates">
<img src="https://www.bootstrap.gallery/demos/nexus-admin-dashboard/assets/images/user4.png" alt="Bootstrap Gallery">
<img src="https://www.bootstrap.gallery/demos/nexus-admin-dashboard/assets/images/user2.png" alt="Best Admin Themes">
<img src="https://www.bootstrap.gallery/demos/nexus-admin-dashboard/assets/images/user1.png" alt="Modern Dashboards">
<span class="plus shade-primary">+3</span>
</div>
</div>
</li>
<li class="activity-list d-flex">
<div class="activity-time pt-3 pr-3">
<p class="date m-0">02:30 pm</p>
<span class="badge shade-primary">50%</span>
</div>
<div class="py-3">
<h5>Bootstrap Gallery</h5>
<p>by Shelomi Sarah</p>
<div class="badge primary">2 days left</div>
</div>
</li>
<li class="activity-list d-flex">
<div class="activity-time pt-3 pr-3">
<p class="date m-0">04:10 pm</p>
<span class="badge shade-primary">89%</span>
</div>
<div class="py-3">
<h5>Dashboard Widgets</h5>
<p>by Mareshah Nicole</p>
<div class="stacked-images mt-3">
<img src="https://www.bootstrap.gallery/demos/nexus-admin-dashboard/assets/images/user4.png" alt="Bootstrap Gallery">
<img src="https://www.bootstrap.gallery/demos/nexus-admin-dashboard/assets/images/user3.png" alt="Best Bootstrap Dashboards">
<img src="https://www.bootstrap.gallery/demos/nexus-admin-dashboard/assets/images/user2.png" alt="Bootstrap Gallery">
<span class="plus shade-primary">+7</span>
</div>
</div>
</li>
<li class="activity-list d-flex">
<div class="activity-time pt-3 pr-3">
<p class="date m-0">05:30 pm</p>
<span class="badge shade-primary">85%</span>
</div>
<div class="py-3">
<h5>Admin Panel</h5>
<p>by Berechiah Philip</p>
<div class="badge primary">3 days left</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
.body {
font-size: 13px;
}
h5 {
margin: 0 0 5px 0;
font-size: 15px;
}
p {
margin: 0 0 5px 0;
font-size: 12px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
border: 1px solid #dfdfdf;
border-radius: 8px;
}
.card {
border: 1px solid #cccccc;
border-radius: 8px;
}
.card-header {
padding: 1rem 1.25rem 0 1.25rem;
background: #ffffff;
border: 0;
}
.card-header:first-child {
border-radius: 8px;
}
.card-title {
font-size: 1.2rem;
margin: 0;
color: #17181c;
font-weight: 600;
line-height: 150%
}
.activity-list {
border-bottom: 1px dotted #dfdfdf;
padding: 0 16px
}
.activity-list .activity-time {
border-right: 1px solid #dfdfdf;
margin: 0 14px 0 0;
min-width: 100px;
}
.activity-list .activity-time .badge {
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
min-width: 70px;
text-align: left;
margin: 5px 0 15px 5px
}
.badge {
font-weight: 400;
color: #ffffff;
font-size: 11px;
border-radius: 2px;
background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%),radial-gradient(66% 87% at 26% 20%, rgba(255, 255, 255, 0.41) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%) !important;
}
.shade-primary {
background: #33715a !important
}
.shade-red {
background: #e93443 !important
}
.badge {
font-weight: 400;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%),radial-gradient(66% 87% at 26% 20%, rgba(255, 255, 255, 0.41) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%) !important
}
.badge.shade-primary {
outline: 1px solid #1c6148;
outline-offset: 3px
}
.badge.primary {
background: #1c6148;
}
.badge.shade-red {
outline: 1px solid #e93443;
outline-offset: 3px
}
.badge.red {
background: #e22132
}
.stacked-images {
display: flex
}
.stacked-images.center {
justify-content: center
}
.stacked-images img {
border-radius: 50px;
width: 40px;
height: 40px;
margin-right: -10px
}
.stacked-images .plus {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
color: #fff;
width: 40px;
height: 40px
}
