<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 ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> <div class="wadah"> <H1 class="judul">Card With Progress Bar</H1> <h5 class="subJudul">value progress bar ada ditengah</h5> <div class="row"> <div class="col-md-4"> <div class="card"> <div class="card-img-top"> <h2><b>Nama Project</b></h2> </div> <div class="card-body"> <div class="media d-flex"> <div class="media-body text-left"> <small>Budget Project</small> <h2 class="mb-0"><b>Rp. 100.000</b></h2> </div> <div class="align-self-center"> <i class="fa fa-pie-chart" aria-hidden="true"></i> </div> </div> <div class="mt-3"> <small>Sisa Budget</small> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> <span class="nilai">75%</span> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-img-top"> <h2><b>Nama Project</b></h2> </div> <div class="card-body"> <div class="media d-flex"> <div class="media-body text-left"> <small>Budget Project</small> <h2 class="mb-0"><b>Rp. 100.000</b></h2> </div> <div class="align-self-center"> <i class="fa fa-pie-chart" aria-hidden="true"></i> </div> </div> <div class="mt-3"> <small>Sisa Budget</small> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> <span class="nilai">75%</span> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-img-top"> <h2><b>Nama Project</b></h2> </div> <div class="card-body"> <div class="media d-flex"> <div class="media-body text-left"> <small>Budget Project</small> <h2 class="mb-0"><b>Rp. 100.000</b></h2> </div> <div class="align-self-center"> <i class="fa fa-pie-chart" aria-hidden="true"></i> </div> </div> <div class="mt-3"> <small>Sisa Budget</small> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> <span class="nilai">75%</span> </div> </div> </div> </div> </div> </div> </div>

.wadah { background-color: #E9E9E9; padding: 3rem; } .judul { font-weight: 700; text-align: center; margin-bottom: 0.5rem; } .subJudul { font-weight: 400; text-align: center; margin-bottom: 2.5rem; } .card { border: none; -webkit-box-shadow: 2px 4px 8px 0px rgba(0,0,0,0.23); -moz-box-shadow: 2px 4px 8px 0px rgba(0,0,0,0.23); box-shadow: 2px 4px 8px 0px rgba(0,0,0,0.23); } .card-img-top { background-image: url(https://cdn.sandals.com/beaches/v12/images/general/destinations/home/beach.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; } .card-img-top h2 { padding: 3rem; margin-bottom: 0; color: #fff; text-align: center; } .card-body i { font-size: 50px; } i, h2 { color: #0F83FF; } .progress { color: #fff; margin-top: 0.5rem; height: 20px; } .nilai { left: 0; width: 100%; text-align: center; z-index: 2; position: absolute; font-size: 13px; }