"Untitled"
Bootstrap 4.1.1 Snippet by ravic9089

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 ----------> <div class="content-wrapper" style="min-height: 205px;"> <section class="content"> <div class="container-fluid"> <div class="card card-primary"> <div class="card-header"> <h3 class="card-title"> <i class="ion ion-clipboard mr-1"></i> FEE MANAGEMENT SYSTEM </h3> </div> </div> <!-----------------------------------> <style> .nav-scroller { position: relative; z-index: 2; height: 2.75rem; overflow-y: hidden; } .nav-scroller .nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding-bottom: 1rem; margin-top: -1px; overflow-x: auto; text-align: center; white-space: nowrap; -webkit-overflow-scrolling: touch; } .nav-scroller .nav-link { padding:.75rem; padding-left:2px; font-size: .875rem; margin-right:10px; } #main-block{ margin-top:5px; } h5{ color: #272727 !important; text-align: center; } #pills-tab nav-link a{ padding-left:2px!important; } .nav-pills .nav-link.active, .nav-pills .show>.nav-link { color: #fff; background-color: #007bff; padding-left: 4px!important; } @media screen and (max-width: 600px) { table { border: 1px outset; width: 100%; } th, td { border: 1px inset; } table th:nth-child(2), table th:nth-child(3) { white-space:nowrap; width: 1px; } table td:nth-child(2), table td:nth-child(3), table td:nth-child(4), table td:nth-child(5), table td:nth-child(6), table td:nth-child(7), table td:nth-child(8), table td:nth-child(9) { white-space:nowrap; width: 1px; } } </style> <div class="container" id="fee"> <div class="nav-scroller py-1 mb-2"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class=https://test.1portal.in/school/humancapitalsystem"nav-item"> <a class="nav-link active" id="pills-Education-tab" data-toggle="pill" href="#pills-Education" role="tab" aria-controls="pills-home" aria-selected="true">CREATE FEE</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-Bussiness-tab" data-toggle="pill" href="#pills-Bussiness" role="tab" aria-controls="pills-profile" aria-selected="false">ASSIGN FEE</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-Economy-tab" data-toggle="pill" href="#pills-Economy" role="tab" aria-controls="pills-contact" aria-selected="false">PAYMENT METHOD</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-Sports-tab" data-toggle="pill" href="#pills-Sports" role="tab" aria-controls="pills-contact" aria-selected="false">SCHOLARSHIP</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-Entertainment-tab" data-toggle="pill" href="#pills-Entertainment" role="tab" aria-controls="pills-contact" aria-selected="false">REVIEW FEE</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-Politics-tab" data-toggle="pill" href="#pills-Politics" role="tab" aria-controls="pills-contact" aria-selected="false">DASHBOARD</a> </li> </li> </ul> </div> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade active show" id="pills-Education" role="tabpanel" aria-labelledby="pills-Education-tab"> <div class="card card-widget widget-user-2"> <header class="blog-header py-1 bg-primary"> <div class="row"> <div class="col-12"> <a class="text-muted" href="#"><h5 class="text-white">CREATE FEE</h5></a> </div> </div> </header> <div class="card card-widget widget-user shadow"> <div class="col-12"> <form method="post" action="" enctype="multipart/form-data"> <div class="card-body"> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label><font style="vertical-align: inherit;">ACADEMIC YEAR </font></label> <select class="form-control select2" name="invigilator"> <option value="">Select Year </option> </select> </div> </div> <div class="col-md-4"> <div class="form-group"> <label><font style="vertical-align: inherit;">ACADEMIC SCHEME</font></label> <select class="form-control select2" name="invigilator"> <option value="">Select Academic</option> </select> </div> </div> <div class="col-md-4"> <div class="form-group"> <label><font style="vertical-align: inherit;">NAME OF THE PROGRAM </font></label> <input type="text" class="form-control" name="name-progess" value="" placeholder="Programme Name"> </div> </div> </div> <div class="row d-block text-center"> <button type="submit" class="btn btn-primary btn-md "><font style="vertical-align: inherit;">SEARCH</font></button> </div> </div> </form> </div> </div> <header class="blog-header py-1 bg-info"> <div class="row"> <div class="col-12"> <a class="text-muted" href="#"><h5 class="text-white">FEE FOR THE PROGRAM</h5></a> </div> </div> </header> <div class="card card-primary mt-0"> <div class="card-footer p-0"> <div class="table-responsive"> <table class="table m-0"> <thead> <tr class="bg-primary"> <td>S.N</td> <td>DESCRIPTION OF FEE HEAD</td><td>NATURE OF FEE HEAD</td><td>FEE HEAD TYPE </td><td>BASE AMOUNT </td><td>TAX</td><td>TOTAL AMOUNT </td> <td>NO. OF INSTALLMENTS</td><td>GRAND TOTAL</td> </tr> </thead> <tbody> <tr> <td>01</td> <td>ANNUAL FEE</td> <td>ONE TIME</td> <td>OLD</td> <td>18000.00</td> <td>5%</td> <td>18900</td> <td>01</td> <td>18900</td> </tr> <tr> <td>01</td> <td>ANNUAL FEE</td> <td>ONE TIME</td> <td>OLD</td> <td>18000.00</td> <td>5%</td> <td>18900</td> <td>01</td> <td>18900</td> </tr> <tr> <td>01</td> <td>ANNUAL FEE</td> <td>ONE TIME</td> <td>OLD</td> <td>18000.00</td> <td>5%</td> <td>18900</td> <td>01</td> <td>18900</td> </tr> <tr> <td>01</td> <td>ANNUAL FEE</td> <td>ONE TIME</td> <td>OLD</td> <td>18000.00</td> <td>5%</td> <td>18900</td> <td>01</td> <td>18900</td> </tr> </tbody></table> </div> <button class="btn btn-success btn-sm float-right m-1"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Add New</font></font></button> </div> <div class="row m-1"> <div class="col-md-4 col-4"> <a class="btn btn-danger btn-md float-left mt-1 text-white"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">CLOSE </font></font></a> </div> <div class="col-md-4 col-4"> <a class="btn btn-warning btn-md justify-content-center t-1 text-white"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">CONTACT</font></font></a> </div> <div class="col-md-4 col-4"> <a class="btn btn-dark btn-md float-right mt-1 text-white"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">FEEDBACK</font></font></a> </div> </div> <br/> </div> </div> </div> <div class="tab-pane fade" id="pills-Bussiness" role="tabpanel" aria-labelledby="pills-Bussiness-tab"> <div class="card card-widget widget-user-2"> <header class="blog-header py-1 bg-primary"> <div class="row"> <div class="col-12"> <a class="text-muted" href="#"><h5 class="text-white">ASSIGN FEES</h5></a> </div> </div> </header> <div class="card card-widget widget-user shadow"> <div class="col-12"> <form method="post" action="" enctype="multipart/form-data"> <div class="card-body"> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label><font style="vertical-align: inherit;">ACADEMIC YEAR </font></label> <select class="form-control select2" name="invigilator"> <option value="">Select Year </option> </select> </div> </div> <div class="col-md-4"> <div class="form-group"> <label><font style="vertical-align: inherit;">ACADEMIC SCHEME</font></label> <select class="form-control select2" name="invigilator"> <option value="">Select Academic</option> </select> </div> </div> <div class="col-md-4"> <div class="form-group"> <label><font style="vertical-align: inherit;">NAME OF THE PROGRAM </font></label> <input type="text" class="form-control" name="name-progess" value="" placeholder="Programme Name"> </div> </div> <div class="col-md-4"> <div class="form-group"> <label><font style="vertical-align: inherit;">DESCRIPTION OF FEE HEAD </font></label> <select class="form-control select2" name="invigilator"> <option value="">Select Year </option> </select> </div> </div> <div class="col-md-4"> <div class="form-group"> <label><font style="vertical-align: inherit;">NATURE OF FEE HEAD </font></label> <select class="form-control select2" name="invigilator"> <option value="">Select Academic</option> </select> </div> </div> <div class="col-md-4"> <div class="form-group"> <label><font style="vertical-align: inherit;">PAYMENT START DATE </font></label> <input type="text" class="form-control" name="name-progess" value="" placeholder="Programme Name"> </div> </div> <div class="col-md-4"> <div class="form-group"> <label><font style="vertical-align: inherit;">PAYMENT DUE DATE </font></label> <select class="form-control select2" name="invigilator"> <option value="">Select Year </option> </select> </div> </div> <div class="col-md-4"> <div class="form-group"> <label><font style="vertical-align: inherit;">TYPE OF FEE HEAD </font></label> <select class="form-control select2" name="invigilator"> <option value="">Select Year </option> </select> </div> </div> </div> <div class="row d-block text-center"> <button type="submit" class="btn btn-primary btn-md "><font style="vertical-align: inherit;">SEARCH</font></button> </div> </div> </form> </div> </div> <header class="blog-header py-1 bg-info"> <div class="row"> <div class="col-12"> <a class="text-muted" href="#"><h5 class="text-white">ASSIGNED CLASSES </h5></a> </div> </div> </header> <div class="card card-primary mt-0"> <div class="card-footer p-0"> <div class="table-responsive"> <table class="table m-0"> <thead> <tr class="bg-primary"> <td>S.N</td> <td>DEPARTMENT</td><td>COURSE - BRANCH</td><td>CLASS </td> </tr> </thead> <tbody> <tr> <td>01</td> <td>demo</td> <td>demo</td> <td>demo</td> </tr> <tr> <td>02</td> <td>demo</td> <td>demo</td> <td>demo</td> </tr> <tr> <td>02</td> <td>demo</td> <td>demo</td> <td>demo</td> </tr> <tr> <td>02</td> <td>demo</td> <td>demo</td> <td>demo</td> </tr> </tbody></table> </div> </div> <div class="row m-1"> <div class="col-md-4 col-6"> <a class="btn btn-danger btn-md float-left mt-1 text-white"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">CLOSE </font></font></a> </div> <div class="col-md-4 col-6 justify-content-center"> <a class="btn btn-warning btn-md mt-1 text-white"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">SAVE</font></font></a> </div> <div class="col-md-4 col-12"> <a class="btn btn-dark btn-md float-right mt-1 text-white"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">SAVE & PROCEED</font></font></a> </div> </div> <br/> </div> </div> </div> <div class="tab-pane fade" id="pills-Economy" role="tabpanel" aria-labelledby="pills-Economy-tab"> demooooooo </div> <div class="tab-pane fade" id="pills-Sports" role="tabpanel" aria-labelledby="pills-Sports-tab"> demooooooo </div> <div class="tab-pane fade" id="pills-Entertainment" role="tabpanel" aria-labelledby="pills-Entertainment-tab"> demooooooo </div> <div class="tab-pane fade" id="pills-Politics" role="tabpanel" aria-labelledby="pills-Politics-tab"> demooooooo </div> <div class="tab-pane fade" id="pills-Technology" role="tabpanel" aria-labelledby="pills-Technology-tab"> demooooooo </div> </div> <br> <!--==============================================kjjkhjkhkj=====================--> <!--=======================================hjghjgjgkjgjkgjkgkjgjkg===================--> </div> </div> </section> </div>

Related: See More

Rotating CSS Card

Questions / Comments: