"Browser Stats - Widgets"
Bootstrap 4.1.1 Snippet by BootstrapGallery

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 justify-content-center">
<div class="col-5">
<div class="card">
<div class="card-header">
<div class="card-title">Browser Stats</div>
</div>
<div class="card-body">
<div class="d-grid gap-4">
<div class="d-flex">
<div>
<img class="mr-2 img-3xx" src="https://www.bootstrap.gallery/demos/nexus-admin-dashboard/assets/images/browser/chrome.svg" alt="Chrome">
Chrome
</div>
<div class="d-flex align-items-center ms-auto">
<h5 class="m-0 mr-3">87,590</h5>
<span class="badge shade-light-blue"><i class="bi bi-arrow-up-circle-fill mr-2"></i>6%</span>
</div>
</div>
<div class="d-flex">
<div>
<img class="mr-2 img-3xx" src="https://www.bootstrap.gallery/demos/nexus-admin-dashboard/assets/images/browser/firefox.svg" alt="Firefox">
Firefox
</div>
<div class="d-flex align-items-center ms-auto">
<h5 class="m-0 mr-3">34,450</h5>
<span class="badge shade-light-red"><i class="bi bi-arrow-down-circle-fill mr-2"></i>3%</span>
</div>
</div>
<div class="d-flex">
<div>
<img class="mr-2 img-3xx" src="https://www.bootstrap.gallery/demos/nexus-admin-dashboard/assets/images/browser/opera.svg" alt="Opera">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import "https://icons.getbootstrap.com/assets/font/bootstrap-icons.min.css";
.d-grid {
display: grid;
}
.gap-4 {
gap: 1.5rem;
}
.d-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
.ms-auto {
margin-left: auto;
}
.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%
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit PRO
Hero Widgets
Stats example

Questions / Comments: