<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="card"> <div class="card-header"> <div class="card-title">Target</div> </div> <div class="card-body"> <div class="row"> <div class="col-sm-3 col-6"> <div class="d-flex py-3 px-2 mt-2 flex-column box-bdr-blue"> <h6 class="text-truncate">Q1 - <span>$3k</span></h6> <div class="progress small"> <div class="progress-bar shade-blue" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> <div class="col-sm-3 col-6"> <div class="d-flex py-3 px-2 mt-2 flex-column box-bdr-blue"> <h6 class="text-truncate">Q2 - <span>$4k</span></h6> <div class="progress small"> <div class="progress-bar shade-blue" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> <div class="col-sm-3 col-6"> <div class="d-flex py-3 px-2 mt-2 flex-column box-bdr-blue"> <h6 class="text-truncate">Q3 - <span>$7k</span></h6> <div class="progress small"> <div class="progress-bar shade-blue" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> <div class="col-sm-3 col-6"> <div class="d-flex py-3 px-2 mt-2 flex-column box-bdr-red"> <h6 class="text-truncate">Q4 - <span>$9k</span></h6> <div class="progress small"> <div class="progress-bar shade-red" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> </div> </div> </div> </div>

.box-bdr-blue { border: 1px solid #448af4; border-radius: 5px; } .box-bdr-red { border: 1px solid #e96c76; border-radius: 5px; } .shade-blue { background: #337ce9; } .shade-red { background: #e96c76; } .progress.small { height: 5px; } .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% }