Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Untitled"
Bootstrap 4.1.1 Snippet by
ravic9089
4.1.1
Preview
HTML
View Full Screen
Fork
Fork this
790
 
0 Fav
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
Free Template
Vue Now UI Kit
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76