<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"> Opera </div> <div class="d-flex align-items-center ms-auto"> <h5 class="m-0 mr-3">26,619</h5> <span class="badge shade-light-blue"><i class="bi bi-arrow-up-circle-fill mr-2"></i>2%</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/safari.svg" alt="Safari"> Safari </div> <div class="d-flex align-items-center ms-auto"> <h5 class="m-0 mr-3">21,725</h5> <span class="badge shade-light-blue"><i class="bi bi-arrow-up-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/ie.svg" alt="Edge"> Edge </div> <div class="d-flex align-items-center ms-auto"> <h5 class="m-0 mr-3">12,481</h5> <span class="badge shade-light-red"><i class="bi bi-arrow-down-circle-fill mr-2"></i>5%</span> </div> </div> </div> </div> </div> </div> </div> </div>

@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% } .img-3xx { width: 3.5rem; height: 3.5rem; } .badge.shade-light-blue { outline: 1px solid #337ce9; background-color: #eaf2ff; outline-offset: 3px; color: #276dd9; } .badge.shade-light-red { outline: 1px solid #e93443; background-color: #fff2f3; outline-offset: 3px; color: #e22132; }