"Performance score card"
Bootstrap 4.1.1 Snippet by tieusuquay79

Post to Facebook Tweet this

<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 ----------> <body> <div class="container d-flex justify-content-center mt-4"> <div class="card p-3 mt-3"> <h5 class="mt-3 mb-3">Performance score</h5> <div class="border p-2 rounded d-flex flex-row align-items-center"> <div class="p-1 px-4 d-flex flex-column align-items-center score rounded"> <span class="d-block char text-success">A</span> <span class="text-success">98%</span> </div> <div class="ml-2 p-3"> <h6 class="heading1">PageSpeed Score</h6> <span>The average page speed score is 75%</span> </div> </div> <div class="border p-2 rounded d-flex flex-row align-items-center mt-2"> <div class="p-1 px-4 d-flex flex-column align-items-center speed rounded"> <span class="d-block char text-warning">C</span> <span class="text-warning">72%</span> </div> <div class="ml-2 p-4"> <h6 class="text">YSlow Score</h6> <span>The average YSlow score is 76%</span> </div> </div> </div> </div>
body { background-color: #eee } .card { width: 380px; border: none } .border { border-radius: 12px } .score { background-color: #B9F6CA } .heading1 { color: #0D47A1 } .text { color: #0D47A1 } .speed { background-color: #FFE082 } .char { font-size: 30px; font-weight: 700 }

Related: See More

Navbar With Icons
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: