Hello to all, welcome to therichpost.com. In this post, I will show you Laravel 10 School Admin Dashboard Template Free.
This is just demo laravel admin dashboard template and you can set this according to your requirements.
Guys if you are new in Laravel 10 the please check below link for Laravel basics information:
Laravel 10 Basics Tutorial for beginners
Here is the code snippet and please use carefully:
1. Here is the code below and you can add into your resources/views/ welcome.blade.php file:
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="https://laravel.com/img/favicon/favicon-16x16.png" type='image/x-icon'> <title>Admin Dashboard</title> <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png"> <link href="../../../../css?family=Roboto:300,400,500,700,900" rel="stylesheet"> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css"> <link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css"> <link rel="stylesheet" href="assets/css/fullcalendar.min.css"> <link rel="stylesheet" href="assets/css/dataTables.bootstrap4.min.css"> <link rel="stylesheet" href="assets/plugins/morris/morris.css"> <link rel="stylesheet" href="assets/css/style.css"> <!--[if lt IE 9]> <script src="assets/js/html5shiv.min.js"></script> <script src="assets/js/respond.min.js"></script> <![endif]--> </head> <body> <div class="main-wrapper"> <div class="header-outer"> <div class="header"> <a id="mobile_btn" class="mobile_btn float-left" href="#sidebar"><i class="fas fa-bars" aria-hidden="true"></i></a> <a id="toggle_btn" class="float-left" href="javascript:void(0);"> <img src="assets/img/sidebar/icon-21.png" alt=""> </a> <ul class="nav float-left"> <li> <div class="top-nav-search"> <a href="javascript:void(0);" class="responsive-search"> <i class="fa fa-search"></i> </a> <form action="inbox.html"> <input class="form-control" type="text" placeholder="Search here"> <button class="btn" type="submit"><i class="fa fa-search"></i></button> </form> </div> </li> <li> <a href="#" class="mobile-logo d-md-block d-lg-none d-block"><img src="assets/img/logo1.png" alt="" width="30" height="30"></a> </li> </ul> <ul class="nav user-menu float-right"> <li class="nav-item dropdown d-none d-sm-block"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown"> <img src="assets/img/sidebar/icon-22.png" alt=""> </a> <div class="dropdown-menu notifications"> <div class="topnav-dropdown-header"> <span>Notifications</span> </div> <div class="drop-scroll"> <ul class="notification-list"> <li class="notification-message"> <a href="#"> <div class="media"> <span class="avatar"> <img alt="John Doe" src="assets/img/user-06.jpg" class="img-fluid rounded-circle"> </span> <div class="media-body"> <p class="noti-details"><span class="noti-title">John Doe</span> is now following you </p> <p class="noti-time"><span class="notification-time">4 mins ago</span></p> </div> </div> </a> </li> <li class="notification-message"> <a href="#"> <div class="media"> <span class="avatar">T</span> <div class="media-body"> <p class="noti-details"><span class="noti-title">Tarah Shropshire</span> sent you a message.</p> <p class="noti-time"><span class="notification-time">6 mins ago</span></p> </div> </div> </a> </li> <li class="notification-message"> <a href="#"> <div class="media"> <span class="avatar">L</span> <div class="media-body"> <p class="noti-details"><span class="noti-title">Misty Tison</span> like your photo.</p> <p class="noti-time"><span class="notification-time">8 mins ago</span></p> </div> </div> </a> </li> <li class="notification-message"> <a href="#"> <div class="media"> <span class="avatar">G</span> <div class="media-body"> <p class="noti-details"><span class="noti-title">Rolland Webber</span> booking appoinment for meeting.</p> <p class="noti-time"><span class="notification-time">12 mins ago</span></p> </div> </div> </a> </li> <li class="notification-message"> <a href="#"> <div class="media"> <span class="avatar">T</span> <div class="media-body"> <p class="noti-details"><span class="noti-title">Bernardo Galaviz</span> like your photo.</p> <p class="noti-time"><span class="notification-time">2 days ago</span></p> </div> </div> </a> </li> </ul> </div> <div class="topnav-dropdown-footer"> <a href="#">View all Notifications</a> </div> </div> </li> <li class="nav-item dropdown d-none d-sm-block"> <a href="javascript:void(0);" id="open_msg_box" class="hasnotifications nav-link"><img src="assets/img/sidebar/icon-23.png" alt=""> </a> </li> <li class="nav-item dropdown has-arrow"> <a href="#" class=" nav-link user-link" data-toggle="dropdown"> <span class="user-img"><img class="rounded-circle" src="assets/img/user-06.jpg" width="30" alt="Admin"> <span class="status online"></span></span> <span>Admin</span> </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">My Profile</a> <a class="dropdown-item" href="#">Edit Profile</a> <a class="dropdown-item" href="inbox.html">Settings</a> <a class="dropdown-item" href="inbox.html">Logout</a> </div> </li> </ul> <div class="dropdown mobile-user-menu float-right"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fas fa-ellipsis-v"></i></a> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">My Profile</a> <a class="dropdown-item" href="#">Edit Profile</a> <a class="dropdown-item" href="inbox.html">Settings</a> <a class="dropdown-item" href="inbox.html">Logout</a> </div> </div> </div> </div> <div class="sidebar" id="sidebar"> <div class="sidebar-inner slimscroll"> <div id="sidebar-menu" class="sidebar-menu"> <div class="header-left"> <a href="#" class="logo"> <img src="assets/img/logo1.png" width="40" height="40" alt=""> <span class="text-uppercase">Preschool</span> </a> </div> <ul class="sidebar-ul"> <li class="menu-title">Menu</li> <li class="active"> <a href="#"><img src="assets/img/sidebar/icon-1.png" alt="icon"><span>Dashboard</span></a> </li> <li class="submenu"> <a href="#"><img src="assets/img/sidebar/icon-2.png" alt="icon"> <span> Teachers</span> <span class="menu-arrow"></span></a> <ul class="list-unstyled" style="display: none;"> <li><a href="#"><span>All Teachers</span></a></li> <li><a href="#"><span>Add Teacher</span></a></li> <li><a href="#"><span>Edit Teacher</span></a></li> <li><a href="#"><span>About Teacher</span></a></li> </ul> </li> <li class="submenu"> <a href="#"><img src="assets/img/sidebar/icon-3.png" alt="icon"> <span> Students</span> <span class="menu-arrow"></span></a> <ul class="list-unstyled" style="display: none;"> <li><a href="#"><span>All Students</span></a></li> <li><a href="#"><span>Add Student</span></a></li> <li><a href="#"><span>Edit Student</span></a></li> <li><a href="#"><span>ABout student</span></a></li> </ul> </li> <li class="submenu"> <a href="#"><img src="assets/img/sidebar/icon-4.png" alt="icon"> <span> Parents</span> <span class="menu-arrow"></span></a> <ul class="list-unstyled" style="display: none;"> <li><a href="#"><span>All Parents</span></a></li> <li><a href="#"><span>Add Parent</span></a></li> <li><a href="#"><span>Edit Parent</span></a></li> <li><a href="#"><span>About Parent</span></a></li> </ul> </li> <li class="submenu"> <a href="javascript:void(0);"><img src="assets/img/sidebar/icon-5.png" alt="icon"> <span>Apps</span> <span class="menu-arrow"></span></a> <ul style="display: none;"> <li class="submenu"> <a href="javascript:void(0);"><span>Email</span> <span class="menu-arrow"></span></a> <ul style="display: none;"> <li><a href="#"><span>Compose Mail</span></a></li> <li> <a href="inbox.html"> <span> Inbox</span> </a> </li> <li><a href="inbox.html"><span>Mailview</span></a></li> </ul> </li> <li> <a href="#"> Chat <span class="badge badge-pill bg-primary float-right">5</span></a> </li> <li class="submenu"> <a href="#"><span> Calls</span> <span class="menu-arrow"></span></a> <ul class="list-unstyled" style="display: none;"> <li><a href="inbox.html"><span>Voice Call</span></a></li> <li><a href="inbox.html"><span>Video Call</span></a></li> <li><a href="inbox.html"><span>Incoming Call</span></a></li> </ul> </li> <li> <a href="inbox.html"><span> Contacts</span></a> </li> </ul> </li> <li> <a href="inbox.html"><img src="assets/img/sidebar/icon-6.png" alt="icon"> <span>Calendar</span></a> </li> <li> <a href="inbox.html"><img src="assets/img/sidebar/icon-7.png" alt="icon"> <span>Exam list</span></a> </li> <li> <a href="inbox.html"><img src="assets/img/sidebar/icon-8.png" alt="icon"> <span>Holidays</span></a> </li> <li> <a href="inbox.html"><img src="assets/img/sidebar/icon-9.png" alt="icon"><span> Events</span></a> </li> <li class="submenu"> <a href="#"><img src="assets/img/sidebar/icon-10.png" alt="icon"><span> Accounts </span> <span class="menu-arrow"></span></a> <ul class="list-unstyled" style="display: none;"> <li><a href="inbox.html"><span>Invoices</span></a></li> <li><a href="inbox.html"><span>Payments</span></a></li> <li><a href="inbox.html"><span>Expenses</span></a></li> <li><a href="inbox.html"><span>Provident Fund</span></a></li> <li><a href="inbox.html"><span>Taxes</span></a></li> </ul> </li> <li class="submenu"> <a href="#"><img src="assets/img/sidebar/icon-11.png" alt="icon"><span> Payroll </span> <span class="menu-arrow"></span></a> <ul class="list-unstyled" style="display: none;"> <li><a href="inbox.html"><span> Employee Salary </span></a></li> <li><a href="inbox.html"><span> Payslip </span></a></li> </ul> </li> <li class="submenu"> <a href="#"><img src="assets/img/sidebar/icon-12.png" alt="icon"> <span> Blog</span> <span class="menu-arrow"></span></a> <ul class="list-unstyled" style="display: none;"> <li><a href="inbox.html"><span>Blog</span></a></li> <li><a href="inbox.html"><span>Blog View</span></a></li> <li><a href="inbox.html"><span>Add Blog</span></a></li> <li><a href="inbox.html"><span>Edit Blog</span></a></li> </ul> </li> <li class="submenu"> <a href="javascript:void(0);" class="noti-dot"><img src="assets/img/sidebar/icon-13.png" alt="icon"> <span>Management </span> <span class="menu-arrow"></span></a> <ul style="display: none;"> <li class="submenu"> <a href="#"><span> Employees</span> <span class="menu-arrow"></span></a> <ul class="list-unstyled" style="display: none;"> <li><a href="inbox.html"><span>All Employees</span></a></li> <li><a href="inbox.html"><span>Holidays</span></a></li> <li><a href="inbox.html"><span>Leave Requests</span> <span class="badge badge-pill bg-primary float-right">1</span></a></li> <li><a href="inbox.html"><span>Attendance</span></a></li> <li><a href="inbox.html"><span>Departments</span></a></li> <li><a href="inbox.html"><span>Designations</span></a></li> </ul> </li> <li> <a href="#"><span>Activities</span></a> </li> <li> <a href="inbox.html"><span>Users</span></a> </li> <li class="submenu"> <a href="#"><span> Reports </span> <span class="menu-arrow"></span></a> <ul class="list-unstyled" style="display: none;"> <li><a href="inbox.html"> <span>Expense Report </span></a></li> <li><a href="inbox.html"> <span>Invoice Report</span> </a></li> </ul> </li> </ul> </li> <li> <a href="inbox.html"><img src="assets/img/sidebar/icon-14.png" alt="icon"> <span>Settings</span></a> </li> <li class="menu-title">UI Elements</li> <li class="submenu"> <a href="#"><img src="assets/img/sidebar/icon-15.png" alt="icon"> <span> Components</span> <span class="menu-arrow"></span></a> <ul class="list-unstyled" style="display: none;"> <li><a href="inbox.html"><span>UI Kit</span></a></li> <li><a href="inbox.html"><span>Typography</span></a></li> <li><a href="inbox.html"><span>Tabs</span></a></li> </ul> </li> <li class="submenu"> <a href="#"><img src="assets/img/sidebar/icon-26.png" alt="icon"> <span> Elements</span> <span class="menu-arrow"></span></a> <ul class="list-unstyled" style="display: none;"> <li><a href="inbox.html">Sweet Alerts</a></li> <li><a href="inbox.html">Tooltip</a></li> <li><a href="inbox.html">Popover</a></li> <li><a href="inbox.html">Ribbon</a></li> <li><a href="inbox.html">Clipboard</a></li> <li><a href="inbox.html">Drag & Drop</a></li> <li><a href="inbox.html">Range Slider</a></li> <li><a href="inbox.html">Rating</a></li> <li><a href="inbox.html">Toastr</a></li> <li><a href="inbox.html">Text Editor</a></li> <li><a href="inbox.html">Counter</a></li> <li><a href="inbox.html">Scrollbar</a></li> <li><a href="inbox.html">Spinner</a></li> <li><a href="inbox.html">Notification</a></li> <li><a href="inbox.html">Lightbox</a></li> <li><a href="inbox.html">Sticky Note</a></li> <li><a href="inbox.html">Timeline</a></li> <li><a href="inbox.html">Horizontal Timeline</a></li> <li><a href="inbox.html">Form Wizard</a></li> </ul> </li> <li class="submenu"> <a href="#"><img src="assets/img/sidebar/icon-27.png" alt="icon"> <span> Chart</span> <span class="menu-arrow"></span></a> <ul class="list-unstyled" style="display: none;"> <li><a href="inbox.html">Apex Charts</a></li> <li><a href="inbox.html">Chart Js</a></li> <li><a href="inbox.html">Morris Charts</a></li> <li><a href="inbox.html">Flot Charts</a></li> <li><a href="inbox.html">Peity Charts</a></li> <li><a href="inbox.html">C3 Charts</a></li> </ul> </li> </ul> </div> </div> </div> <div class="page-wrapper"> <div class="content container-fluid"> <div class="page-header"> <div class="row"> <div class="col-md-6"> <h3 class="page-title mb-0">Dashboard</h3> </div> <div class="col-md-6"> <ul class="breadcrumb mb-0 p-0 float-right"> <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i> Home</a></li> <li class="breadcrumb-item"><span>Dashboard</span></li> </ul> </div> </div> </div> <div class="row"> <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3"> <div class="dash-widget dash-widget5"> <span class="float-left"><img src="assets/img/dash/dash-1.png" alt="" width="80"></span> <div class="dash-widget-info text-right"> <span>Students</span> <h3>60,000</h3> </div> </div> </div> <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3"> <div class="dash-widget dash-widget5"> <div class="dash-widget-info text-left d-inline-block"> <span>Teachers</span> <h3>12,000</h3> </div> <span class="float-right"><img src="assets/img/dash/dash-2.png" width="80" alt=""></span> </div> </div> <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3"> <div class="dash-widget dash-widget5"> <span class="float-left"><img src="assets/img/dash/dash-3.png" alt="" width="80"></span> <div class="dash-widget-info text-right"> <span>Parents</span> <h3>20,000</h3> </div> </div> </div> <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3"> <div class="dash-widget dash-widget5"> <div class="dash-widget-info d-inline-block text-left"> <span>Total Earnings</span> <h3>$20,000</h3> </div> <span class="float-right"><img src="assets/img/dash/dash-4.png" alt="" width="80"></span> </div> </div> </div> <div class="row"> <div class="col-lg-6 d-flex"> <div class="card flex-fill"> <div class="card-header"> <div class="row align-items-center"> <div class="col-auto"> <div class="page-title"> Students Survay </div> </div> <div class="col text-right"> <div class=" mt-sm-0 mt-2"> <button class="btn btn-light" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Action</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Another action</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> </div> </div> <div class="card-body"> <div id="chart1"></div> </div> </div> </div> <div class="col-lg-6 d-flex"> <div class="card flex-fill"> <div class="card-header"> <div class="row align-items-center"> <div class="col-auto"> <div class="page-title"> Student Performance </div> </div> <div class="col text-right"> <div class=" mt-sm-0 mt-2"> <button class="btn btn-light" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Action</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Another action</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> </div> </div> <div class="card-body"> <div id="chart2"></div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-6 col-md-12 col-12 d-flex"> <div class="card flex-fill"> <div class="card-header"> <div class="row align-items-center"> <div class="col-auto"> <div class="page-title"> Events </div> </div> <div class="col text-right"> <div class=" mt-sm-0 mt-2"> <button class="btn btn-light" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Action</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Another action</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> </div> </div> <div class="card-body"> <div id="calendar" class=" overflow-hidden"></div> </div> </div> </div> <div class="col-lg-6 col-md-12 col-12 d-flex"> <div class="card flex-fill"> <div class="card-header"> <div class="row align-items-center"> <div class="col-auto"> <div class="page-title"> Total Member </div> </div> <div class="col text-right"> <div class=" mt-sm-0 mt-2"> <button class="btn btn-light" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Action</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Another action</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> </div> </div> <div class="card-body d-flex align-items-center justify-content-center overflow-hidden"> <div id="chart3"> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-6 col-md-12 col-12 d-flex"> <div class="card flex-fill"> <div class="card-header"> <div class="row align-items-center"> <div class="col-auto"> <div class="page-title"> Income Monthwise </div> </div> <div class="col text-right"> <div class=" mt-sm-0 mt-2"> <button class="btn btn-light" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Action</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Another action</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> </div> </div> <div class="card-body"> <div id="chart4"></div> </div> </div> </div> <div class="col-lg-6 d-flex"> <div class="card flex-fill"> <div class="card-header"> <div class="row align-items-center"> <div class="col-auto"> <div class="page-title"> Exam List </div> </div> <div class="col text-right"> <div class=" mt-sm-0 mt-2"> <button class="btn btn-light" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Action</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Another action</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> </div> </div> <div class="card-body"> <div class="row"> <div class="col-md-12"> <div class="table-responsive"> <table class="table custom-table"> <thead class="thead-light"> <tr> <th>Exam Name </th> <th>Subject</th> <th>Class</th> <th>Section</th> <th>Time</th> <th>Date</th> <th class="text-right">Action</th> </tr> </thead> <tbody> <tr> <td> <a href="#" class="avatar bg-green">C</a> </td> <td>English</td> <td>5</td> <td>B</td> <td>10.00am</td> <td>20/1/2019</td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> <tr> <td> <a href="#" class="avatar bg-purple">C</a> </td> <td>English</td> <td>4</td> <td>A</td> <td>10.00am</td> <td>2/1/2019</td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> <tr> <td> <a href="#" class="avatar bg-green">C</a> </td> <td>Maths</td> <td>6</td> <td>B</td> <td>10.00am</td> <td>2/1/2019</td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> <tr> <td> <a href="#" class="avatar bg-dark">C</a> </td> <td>Science</td> <td>3</td> <td>B</td> <td>10.00am</td> <td>20/1/2019</td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> <tr> <td> <a href="#" class="avatar bg-green">C</a> </td> <td>Maths</td> <td>6</td> <td>B</td> <td>10.00am</td> <td>20/1/2019</td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> <tr> <td> <a href="#" class="avatar bg-dark">C</a> </td> <td>English</td> <td>7</td> <td>B</td> <td>10.00am</td> <td>20/1/2019</td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> <tr> <td> <a href="#" class="avatar bg-purple">C</a> </td> <td>Science</td> <td>5</td> <td>B</td> <td>10.00am</td> <td>20/1/2019</td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-12"> <div class="card"> <div class="card-header"> <div class="row align-items-center"> <div class="col-sm-6"> <div class="page-title"> All Students </div> </div> <div class="col-sm-6 text-sm-right"> <div class=" mt-sm-0 mt-2"> <button class="btn btn-outline-primary mr-2"><img src="assets/img/excel.png" alt=""><span class="ml-2">Excel</span></button> <button class="btn btn-outline-danger mr-2"><img src="assets/img/pdf.png" alt="" height="18"><span class="ml-2">PDF</span></button> <button class="btn btn-light" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Action</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Another action</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> </div> </div> <div class="card-body"> <div class="table-responsive"> <table class="table custom-table"> <thead class="thead-light"> <tr> <th>Name </th> <th>Student ID</th> <th>Class</th> <th>Section</th> <th>Mobile</th> <th>Date of Birth</th> <th class="text-right">Action</th> </tr> </thead> <tbody> <tr> <td> <h2><a href="#" class="avatar text-white"><img src="assets/img/profile/img-1.jpg" alt=""></a><a href="#">Parker <span></span></a></h2> </td> <td>ST-0d001</td> <td>1</td> <td>A</td> <td>973-584-58700</td> <td>20/1/2021</td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> <tr> <td> <h2><a href="#" class="avatar text-white"><img src="assets/img/profile/img-2.jpg" alt=""></a><a href="#">Smith <span></span></a></h2> </td> <td>ST-0d002</td> <td>2</td> <td>B</td> <td>973-584-58700</td> <td>20/1/2021</td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> <tr> <td> <h2><a href="#" class="avatar text-white"><img src="assets/img/profile/img-3.jpg" alt=""></a><a href="#">Hensley<span></span></a></h2> </td> <td>ST-0d003</td> <td>1</td> <td>A</td> <td>973-584-58700</td> <td>20/1/2021</td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> <tr> <td> <h2><a href="#" class="avatar text-white"><img src="assets/img/profile/img-4.jpg" alt=""></a><a href="#">Friesen<span></span></a></h2> </td> <td>ST-0d004</td> <td>1</td> <td>A</td> <td>973-584-58700</td> <td>20/1/2021</td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> <tr> <td> <h2><a href="#" class="avatar text-white"><img src="assets/img/profile/img-5.jpg" alt=""></a><a href="#">Jackson<span></span></a></h2> </td> <td>ST-0d005</td> <td>1</td> <td>A</td> <td>973-584-58700</td> <td>20/1/2021</td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> <tr> <td> <h2><a href="#" class="avatar text-white"><img src="assets/img/profile/img-6.jpg" alt=""></a><a href="#">Mason<span></span></a></h2> </td> <td>ST-0d006</td> <td>1</td> <td>A</td> <td>973-584-58700</td> <td>20/1/2021</td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> <tr> <td> <h2><a href="#" class="avatar text-white"><img src="assets/img/profile/img-7.jpg" alt=""></a><a href="#">Garrett <span></span></a></h2> </td> <td>ST-0d007</td> <td>1</td> <td>A</td> <td>973-584-58700</td> <td>20/1/2021</td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-header"> <div class="row align-items-center"> <div class="col-sm-6"> <div class="page-title"> New Students </div> </div> <div class="col-sm-6 text-sm-right"> <div class=" mt-sm-0 mt-2"> <button class="btn btn-outline-primary mr-2"><img src="assets/img/excel.png" alt=""><span class="ml-2">Excel</span></button> <button class="btn btn-outline-danger mr-2"><img src="assets/img/pdf.png" alt="" height="18"><span class="ml-2">PDF</span></button> <button class="btn btn-light" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></button> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Action</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Another action</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> </div> </div> <div class="card-body"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-12"> <div class="table-responsive"> <table class="table custom-table"> <thead class="thead-light"> <tr> <th>Name </th> <th>Student ID</th> <th>Parent Name</th> <th>Mobile</th> <th>Address</th> <th>Date Of Admition</th> <th>Fees Receipt</th> <th class="text-right">Action</th> </tr> </thead> <tbody> <tr> <td> <h2><a href="#" class="avatar text-white"><img src="assets/img/profile/img-1.jpg" alt=""></a><a href="#">Parker <span></span></a></h2> </td> <td>ST-0d001</td> <td>Mr. Johnson</td> <td>973-584-58700</td> <td>9946 Baker Rd. Marysville, </td> <td>20/1/2021</td> <td><img src="assets/img/pdf.png" alt=""></td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> <tr> <td> <h2><a href="#" class="avatar text-white"><img src="assets/img/profile/img-2.jpg" alt=""></a><a href="#">Smith <span></span></a></h2> </td> <td>ST-0d002</td> <td>Mr. Luke Idaman</td> <td>973-584-58700</td> <td>193 S. Harrison Drive </td> <td>20/1/2021</td> <td><img src="assets/img/pdf.png" alt=""></td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> <tr> <td> <h2><a href="#" class="avatar text-white"><img src="assets/img/profile/img-3.jpg" alt=""></a><a href="#">Hensley<span></span></a></h2> </td> <td>ST-0d003</td> <td>Mr. Kevin H</td> <td>973-584-58700</td> <td>8949 Golf St. Palm Coast </td> <td>20/1/2021</td> <td><img src="assets/img/pdf.png" alt=""></td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> <tr> <td> <h2><a href="#" class="avatar text-white"><img src="assets/img/profile/img-4.jpg" alt=""></a><a href="#">Friesen<span></span></a></h2> </td> <td>ST-0d004</td> <td>Mr. Randy O</td> <td>973-584-58700</td> <td>23 Ohio Court Alexandria </td> <td>20/1/2021</td> <td><img src="assets/img/pdf.png" alt=""></td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> <tr> <td> <h2><a href="#" class="avatar text-white"><img src="assets/img/profile/img-5.jpg" alt=""></a><a href="#">Jackson<span></span></a></h2> </td> <td>ST-0d005</td> <td>Mr. Steven</td> <td>973-584-58700</td> <td>338 North Cleveland Rd </td> <td>20/1/2021</td> <td><img src="assets/img/pdf.png" alt=""></td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> <tr> <td> <h2><a href="#" class="avatar text-white"><img src="assets/img/profile/img-6.jpg" alt=""></a><a href="#">Mason<span></span></a></h2> </td> <td>ST-0d006</td> <td>Mr. Ervin</td> <td>973-584-58700</td> <td>7909 W. Sunnyslope St. </td> <td>20/1/2021</td> <td><img src="assets/img/pdf.png" alt=""></td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> <tr> <td> <h2><a href="#" class="avatar text-white"><img src="assets/img/profile/img-7.jpg" alt=""></a> <a href="#">Garrett <span></span></a></h2> </td> <td>ST-0d007</td> <td>Mr. Marquz</td> <td>973-584-58700</td> <td>7361 Dunbar Street </td> <td>20/1/2021</td> <td><img src="assets/img/pdf.png" alt=""></td> <td class="text-right"> <a href="#" class="btn btn-primary btn-sm mb-1"> <i class="far fa-edit"></i> </a> <button type="submit" data-toggle="modal" data-target="#delete_employee" class="btn btn-danger btn-sm mb-1"> <i class="far fa-trash-alt"></i> </button> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> <div class="notification-box"> <div class="msg-sidebar notifications msg-noti"> <div class="topnav-dropdown-header"> <span>Messages</span> </div> <div class="drop-scroll msg-list-scroll"> <ul class="list-box"> <li> <a href="#"> <div class="list-item"> <div class="list-left"> <span class="avatar">R</span> </div> <div class="list-body"> <span class="message-author">Richard Miles </span> <span class="message-time">12:28 AM</span> <div class="clearfix"></div> <span class="message-content">Lorem ipsum dolor sit amet, consectetur adipiscing</span> </div> </div> </a> </li> <li> <a href="#"> <div class="list-item new-message"> <div class="list-left"> <span class="avatar">J</span> </div> <div class="list-body"> <span class="message-author">Ruth C. Gault</span> <span class="message-time">1 Aug</span> <div class="clearfix"></div> <span class="message-content">Lorem ipsum dolor sit amet, consectetur adipiscing</span> </div> </div> </a> </li> <li> <a href="#"> <div class="list-item"> <div class="list-left"> <span class="avatar">T</span> </div> <div class="list-body"> <span class="message-author"> Tarah Shropshire </span> <span class="message-time">12:28 AM</span> <div class="clearfix"></div> <span class="message-content">Lorem ipsum dolor sit amet, consectetur adipiscing</span> </div> </div> </a> </li> <li> <a href="#"> <div class="list-item"> <div class="list-left"> <span class="avatar">M</span> </div> <div class="list-body"> <span class="message-author">Mike Litorus</span> <span class="message-time">12:28 AM</span> <div class="clearfix"></div> <span class="message-content">Lorem ipsum dolor sit amet, consectetur adipiscing</span> </div> </div> </a> </li> <li> <a href="#"> <div class="list-item"> <div class="list-left"> <span class="avatar">C</span> </div> <div class="list-body"> <span class="message-author"> Catherine Manseau </span> <span class="message-time">12:28 AM</span> <div class="clearfix"></div> <span class="message-content">Lorem ipsum dolor sit amet, consectetur adipiscing</span> </div> </div> </a> </li> <li> <a href="#"> <div class="list-item"> <div class="list-left"> <span class="avatar">D</span> </div> <div class="list-body"> <span class="message-author"> Domenic Houston </span> <span class="message-time">12:28 AM</span> <div class="clearfix"></div> <span class="message-content">Lorem ipsum dolor sit amet, consectetur adipiscing</span> </div> </div> </a> </li> <li> <a href="#"> <div class="list-item"> <div class="list-left"> <span class="avatar">B</span> </div> <div class="list-body"> <span class="message-author"> Buster Wigton </span> <span class="message-time">12:28 AM</span> <div class="clearfix"></div> <span class="message-content">Lorem ipsum dolor sit amet, consectetur adipiscing</span> </div> </div> </a> </li> <li> <a href="#"> <div class="list-item"> <div class="list-left"> <span class="avatar">R</span> </div> <div class="list-body"> <span class="message-author"> Rolland Webber </span> <span class="message-time">12:28 AM</span> <div class="clearfix"></div> <span class="message-content">Lorem ipsum dolor sit amet, consectetur adipiscing</span> </div> </div> </a> </li> <li> <a href="#"> <div class="list-item"> <div class="list-left"> <span class="avatar">C</span> </div> <div class="list-body"> <span class="message-author"> Claire Mapes </span> <span class="message-time">12:28 AM</span> <div class="clearfix"></div> <span class="message-content">Lorem ipsum dolor sit amet, consectetur adipiscing</span> </div> </div> </a> </li> <li> <a href="#"> <div class="list-item"> <div class="list-left"> <span class="avatar">M</span> </div> <div class="list-body"> <span class="message-author">Melita Faucher</span> <span class="message-time">12:28 AM</span> <div class="clearfix"></div> <span class="message-content">Lorem ipsum dolor sit amet, consectetur adipiscing</span> </div> </div> </a> </li> <li> <a href="#"> <div class="list-item"> <div class="list-left"> <span class="avatar">J</span> </div> <div class="list-body"> <span class="message-author">Jeffery Lalor</span> <span class="message-time">12:28 AM</span> <div class="clearfix"></div> <span class="message-content">Lorem ipsum dolor sit amet, consectetur adipiscing</span> </div> </div> </a> </li> <li> <a href="#"> <div class="list-item"> <div class="list-left"> <span class="avatar">L</span> </div> <div class="list-body"> <span class="message-author">Loren Gatlin</span> <span class="message-time">12:28 AM</span> <div class="clearfix"></div> <span class="message-content">Lorem ipsum dolor sit amet, consectetur adipiscing</span> </div> </div> </a> </li> <li> <a href="#"> <div class="list-item"> <div class="list-left"> <span class="avatar">T</span> </div> <div class="list-body"> <span class="message-author">Tarah Shropshire</span> <span class="message-time">12:28 AM</span> <div class="clearfix"></div> <span class="message-content">Lorem ipsum dolor sit amet, consectetur adipiscing</span> </div> </div> </a> </li> </ul> </div> <div class="topnav-dropdown-footer"> <a href="#">See all messages</a> </div> </div> </div> </div> </div> </div> <!--********************************** Scripts ***********************************--> <script src="assets/js/jquery-3.6.0.min.js"></script> <script src="assets/js/bootstrap.bundle.min.js"></script> <script src="assets/js/jquery.slimscroll.js"></script> <script src="assets/js/select2.min.js"></script> <script src="assets/js/moment.min.js"></script> <script src="assets/js/fullcalendar.min.js"></script> <script src="assets/js/jquery.fullcalendar.js"></script> <script src="assets/plugins/morris/morris.min.js"></script> <script src="assets/plugins/raphael/raphael-min.js"></script> <script src="assets/js/apexcharts.js"></script> <script src="assets/js/chart-data.js"></script> <script src="assets/js/app.js"></script> </body> </html>
2. Guys here is git repo link from where you can download all the assets and place them inside public folder:
Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.
Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above. I will come with more demos.
I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.
Jassa
Thanks
Recent Comments