<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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"> <style> .graph-my { position: absolute; right: 20px; top: -42px; } .small-box .icon { display: block; } </style> <div class="container mt-4"> <div class="row"> <div class="col-lg-3 col-12"> <!-- small box --> <div class="small-box bg-info"> <i class="pl-3 pt-1 fas fa-2x fa-calendar-alt"></i> <div class="inner"> <h5 class="float-left text-white">Collected     </h5> <h5 class="float-left text-white"><b>Rs 0</b></h5> <br/><br/> <h6 class="float-left text-white">Expected     </h6>  <h6 class="float-left text-white"><b>Rs 0 </b></h6> </div> <a href="#" class="small-box-footer"><b>Monthly Collection</b> <i class="fas fa-arrow-circle-right"></i></a> </div> </div> <!-- ./col --> <div class="col-lg-3 col-12"> <!-- small box --> <div class="small-box bg-warning"> <i class="pl-3 text-white pt-1 fa-2x fas fa-credit-card"></i> <div class="inner"> <h5 class="float-left text-white">Onlin Transaction     </h5> <h5 class="float-left text-white"><b>Rs 0</b></h5> <br/><br/> <h6 class="float-left text-white">Total School Students  </h6>  <h6 class="float-left text-white"><b>Rs 10000 </b></h6> </div> <a href="#" class="small-box-footer text-white"><b class="text-white">Online Payment</b> <i class="fas fa-arrow-circle-right text-white"></i></a> </div> </div> <!-- ./col --> <div class="col-lg-3 col-12"> <!-- small box --> <div class="small-box bg-danger"> <i class="pl-3 text-white pt-1 fa-2x fas fa-box"></i> <div class="inner"> <h5 class="float-left text-white">Collections     </h5> <h5 class="float-left text-white"><b>Rs 0</b></h5> <br/><br/> <h6 class="float-left text-white">Student     </h6>  <h6 class="float-left text-white"><b>Rs 0 </b></h6> </div> <a href="#" class="small-box-footer"><b>Deposit Collection</b> <i class="fas fa-arrow-circle-right"></i></a> </div> </div> <!-- ./col --> <div class="col-lg-3 col-12"> <!-- small box --> <div class="small-box bg-success"> <i class="pl-3 text-white pt-1 fa-2x fas fa-calendar"></i> <div class="inner"> <span class="badge badge-secondary h5">2021-2022</span> <br/><br/> <h5 class="float-left text-white">121521222 Cr</h5></span> </div> <!--<div class="icon"> <i class="fas fa-calendar"></i> </div>--> <!-----dit---> <div class="graph-my" style="display:inline;width:60px;height:60px;"><canvas width="60" height="60"></canvas><input type="text" class="knob" data-readonly="true" value="80" data-width="60" data-height="60" data-fgcolor="blue" readonly="readonly" style="width: 34px; height: 20px; position: absolute; vertical-align: middle; margin-top: 20px; margin-left: -47px; border: 0px; background: none; font: bold 12px Arial; text-align: center; color: rgb(57, 204, 204); padding: 0px; appearance: none;"></div> <!--new--------> <br/> <a href="#" class="small-box-footer"><b>School Collection</b> <i class="fas fa-arrow-circle-right"></i></a> </div> </div> <!-- ./col --> </div> <div class="row"> <div class="col-lg-4"> <div class="card"> <div class="card-header border-0"> <h3 class="card-title mt-2 text-bold">Fee Structure</h3> <div class="card-tools"> <a href="#" class="btn btn-primary btn-sm"> <i class="fas fa-add"></i> ADD </a> <!-- <a href="#" class="btn btn-tool btn-sm"> <i class="fas fa-bars"></i> </a>--> </div> </div> <div class="card-body table-responsive p-0"> <div class="table-responsive"> <table class="table table-striped table-valign-middle"> <thead> <tr> <th>Class(Session Year)</th> <th>#</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td> Gr 12-School Fees<br/><small>2016-2017</small> </td> <td>80</td> <td> <a href="#" class="text-muted"> <i class="fas fa-edit"></i> </a> </td> </tr> <tr> <td> Gr 12-School Fees<br/><small>2016-2017</small> </td> <td>80</td> <td> <a href="#" class="text-muted"> <i class="fas fa-edit"></i> </a> </td> </tr> </tbody> </table> </div> </div> </div> <!-- /.card --> </div> <!-- /.col-md-6 --> <div class="col-lg-5"> <div class="card"> <div class="card-header border-0"> <h3 class="card-title text-bold">Fee Structure Of Gr 12-School Fee 2021-22</h3> <!--<div class="card-tools"> <a href="#" class="btn btn-tool btn-sm"> <i class="fas fa-download"></i> </a> <a href="#" class="btn btn-tool btn-sm"> <i class="fas fa-bars"></i> </a> </div>--> </div> <div class="card-body table-responsive p-0"> <div class="table-responsive"> <table class="table table-striped"> <thead> <tr> <th>Name</th> <th>Amount</th> <th>Date</th> <th>Payment Type</th> </tr> </thead> <tbody> <tr> <td> Term 2-Tution Fees </td> <td>Rs 12000</td> <td> 31-10-2020 to 1-12-2021 </td> <td> One Time </td> </tr> <tr> <td> Term 2-Tution Fees </td> <td>Rs 12000</td> <td> 31-10-2020 to 1-12-2021 </td> <td> One Time </td> </tr> </tbody> </table> </div> </div> </div> <!-- /.card --> </div> <!-- /.col-md-6 --> <div class="col-md-3"> <div class="card p-2"> <br/> <h3><b>8/39</b></h3> <div class="progress-group"> No Of Not Paid Student <span class="float-right"><b>310</b>/400</span> <div class="progress progress-sm"> <div class="progress-bar bg-success" style="width: 75%"></div> </div> </div> <h3><b>Rs 11764654.00/-</b></h3> <h3><b>Rs 11764654.00/-</b></h3> <!-- /.progress-group --> <div class="progress-group"> Total Collection Amount <span class="float-right"><b>250</b>/500</span> <div class="progress progress-sm"> <div class="progress-bar bg-warning" style="width: 50%"></div> </div> </div> <br/> </div> </div> </div> </div>

.bg-info { background-color: #17a2b8!important; } .small-box { border-radius: .25rem; box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%); display: block; margin-bottom: 20px; position: relative; } .small-box>.inner { padding: 10px; } .small-box h3, .small-box p { z-index: 5; } .small-box .icon { color: rgba(0,0,0,.15); z-index: 0; } .small-box .icon>i.fa, .small-box .icon>i.fab, .small-box .icon>i.far, .small-box .icon>i.fas, .small-box .icon>i.glyphicon, .small-box .icon>i.ion { font-size: 70px; top: 20px; } .ion-bag:before { content: "\f110"; } .small-box>.small-box-footer { background: rgba(0,0,0,.1); color: rgba(255,255,255,.8); display: block; padding: 3px 0; position: relative; text-align: center; text-decoration: none; z-index: 10; } .small-box .icon>i { font-size: 90px; position: absolute; right: 15px; top: 15px; transition: -webkit-transform .3s linear; transition: transform .3s linear; transition: transform .3s linear,-webkit-transform .3s linear; }