Categories

Tuesday, December 7, 2021
therichposts@gmail.com
Bootstrap 5Bootstrap 5 TemplatesLaravelLaravel 8

Laravel 8 Bootstrap 5 Admin Dashboard Template Free

Laravel 8 Bootstrap 5 Admin Dashboard Template Free

Hello friends, welcome back on blog. Today in this blog post, I am going to tell you, Laravel 8 Bootstrap 5 Admin Dashboard Template Free.

Laravel 8 Admin Template

Laravel 8 Bootstrap 5 Admin Dashboard Template Free
Laravel 8 Bootstrap 5 Admin Dashboard Template Free

Guys if you are new in Laravel 8 and Bootstrap 5 the please check below links for Laravel basics information:

  1. Laravel Basics Tutorial for beginners
  2. Bootstrap 5

Here is the code snippet and please use carefully:

1. Friends here is the code below and you can add into your resources/views/ welcome.blade.php file:

Guys for demo purpose, I have used this code into my welcome blade:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Richpost Admin Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Custom styles for this template -->
   <!-- Custom CSS -->
   <link href="assets/css/chartist.min.css" rel="stylesheet">
   <link rel="stylesheet" href="assets/css/chartist-plugin-tooltip.css">
   <!-- Custom CSS -->
   <link href="assets/css/style.min.css" rel="stylesheet">
    <!-- All Jquery -->
    <!-- ============================================================== -->
   
    <!-- Bootstrap tether Core JavaScript -->
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    
    <!--This page JavaScript -->
    <!--chartis chart-->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/chartist.min.js"></script>
    <script src="assets/js/chartist-plugin-tooltip.min.js"></script>
    <script src="assets/js/jquery.sparkline.min.js"></script>
     <!--Custom JavaScript -->
    <script src="assets/js/custom.js"></script>

</head>
<body>

<!-- ============================================================== -->
    <!-- Preloader -->
    <!-- ============================================================== -->
    <div class="preloader">
      <div class="lds-ripple">
          <div class="lds-pos"></div>
          <div class="lds-pos"></div>
      </div>
  </div>
  <!-- ============================================================== -->
  <!-- Main wrapper -->
  <!-- ============================================================== -->
  <div id="main-wrapper" data-layout="vertical" data-navbarbg="skin5" data-sidebartype="full"
      data-sidebar-position="absolute" data-header-position="absolute" data-boxed-layout="full">
      <!-- ============================================================== -->
      <!-- Topbar header -->
      <!-- ============================================================== -->
      <header class="topbar" data-navbarbg="skin5">
          <nav class="navbar top-navbar navbar-expand-md navbar-dark">
              <div class="navbar-header" data-logobg="skin6">
                  <!-- ============================================================== -->
                  <!-- Logo -->
                  <!-- ============================================================== -->
                  <a class="navbar-brand" href="#">
                      <!-- Logo icon -->
                      <b class="logo-icon">
                          <!-- Dark Logo icon -->
                          TheRichPost
                      </b>
                      <!--End Logo icon -->
                      <!-- Logo text -->
                      <span class="logo-text">
                          <!-- dark Logo text -->
                         Admin
                      </span>
                  </a>
                  <!-- ============================================================== -->
                  <!-- End Logo -->
                  <!-- ============================================================== -->
                  <!-- ============================================================== -->
                  <!-- toggle and nav items -->
                  <!-- ============================================================== -->
                  <a class="nav-toggler waves-effect waves-light text-dark d-block d-md-none"
                      href="javascript:void(0)"><i class="ti-menu ti-close"></i></a>
              </div>
              <!-- ============================================================== -->
              <!-- End Logo -->
              <!-- ============================================================== -->
              <div class="navbar-collapse collapse" id="navbarSupportedContent" data-navbarbg="skin5">
                 
                  <!-- ============================================================== -->
                  <!-- Right side toggle and nav items -->
                  <!-- ============================================================== -->
                  <ul class="navbar-nav ms-auto d-flex align-items-center">

                      <!-- ============================================================== -->
                      <!-- Search -->
                      <!-- ============================================================== -->
                      <li class=" in">
                          <form role="search" class="app-search d-none d-md-block me-3">
                              <input type="text" placeholder="Search..." class="form-control mt-0">
                              <a href="" class="active">
                                  <i class="fa fa-search"></i>
                              </a>
                          </form>
                      </li>
                      <!-- ============================================================== -->
                      <!-- User profile and search -->
                      <!-- ============================================================== -->
                      <li>
                          <a class="profile-pic" href="#">
                              <img src="https://therichpost.com/wp-content/uploads/2021/03/avatar2.png" alt="user-img" width="36"
                                  class="img-circle"><span class="text-white font-medium">Steave</span></a>
                      </li>
                      <!-- ============================================================== -->
                      <!-- User profile and search -->
                      <!-- ============================================================== -->
                  </ul>
              </div>
          </nav>
      </header>
      <!-- ============================================================== -->
      <!-- End Topbar header -->
      <!-- ============================================================== -->
      <!-- ============================================================== -->
      <!-- Left Sidebar -->
      <!-- ============================================================== -->
      <aside class="left-sidebar" data-sidebarbg="skin6">
          <!-- Sidebar scroll-->
          <div class="scroll-sidebar">
              <!-- Sidebar navigation-->
              <nav class="sidebar-nav">
                  <ul id="sidebarnav">
                      <!-- User Profile-->
                      <li class="sidebar-item pt-2">
                          <a class="sidebar-link waves-effect waves-dark sidebar-link" href="#"
                              aria-expanded="false">
                              <i class="far fa-clock" aria-hidden="true"></i>
                              <span class="hide-menu">Dashboard</span>
                          </a>
                      </li>
                      <li class="sidebar-item">
                          <a class="sidebar-link waves-effect waves-dark sidebar-link" href="#"
                              aria-expanded="false">
                              <i class="fa fa-user" aria-hidden="true"></i>
                              <span class="hide-menu">Profile</span>
                          </a>
                      </li>
                      <li class="sidebar-item">
                          <a class="sidebar-link waves-effect waves-dark sidebar-link" href="#"
                              aria-expanded="false">
                              <i class="fa fa-table" aria-hidden="true"></i>
                              <span class="hide-menu">Basic Table</span>
                          </a>
                      </li>
                     
                  </ul>

              </nav>
              <!-- End Sidebar navigation -->
          </div>
          <!-- End Sidebar scroll-->
      </aside>
      <!-- ============================================================== -->
      <!-- End Left Sidebar -->
      <!-- ============================================================== -->
      <!-- ============================================================== -->
      <!-- Page wrapper  -->
      <!-- ============================================================== -->
      <div class="page-wrapper">
          <!-- ============================================================== -->
          <!-- Bread crumb -->
          <!-- ============================================================== -->
          <div class="page-breadcrumb bg-white">
              <div class="row align-items-center">
                  <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                      <h4 class="page-title">Dashboard</h4>
                  </div>
                  <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
                      <div class="d-md-flex">
                          <ol class="breadcrumb ms-auto">
                              <li><a href="#" class="fw-normal">Bootstrap 5</a></li>
                          </ol>
                         
                      </div>
                  </div>
              </div>
              <!-- /.col-lg-12 -->
          </div>
          <!-- ============================================================== -->
          <!-- End Bread -->
          <!-- ============================================================== -->
          <!-- ============================================================== -->
          <!-- Container fluid  -->
          <!-- ============================================================== -->
          <div class="container-fluid">
              <!-- ============================================================== -->
              <!-- Three charts -->
              <!-- ============================================================== -->
              <div class="row justify-content-center">
                  <div class="col-lg-4 col-md-12">
                      <div class="white-box analytics-info">
                          <h3 class="box-title">Total Visit</h3>
                          <ul class="list-inline two-part d-flex align-items-center mb-0">
                              <li>
                                  <div id="sparklinedash"><canvas width="67" height="30"
                                          style="display: inline-block; width: 67px; height: 30px; vertical-align: top;"></canvas>
                                  </div>
                              </li>
                              <li class="ms-auto"><span class="counter text-success">659</span></li>
                          </ul>
                      </div>
                  </div>
                  <div class="col-lg-4 col-md-12">
                      <div class="white-box analytics-info">
                          <h3 class="box-title">Total Page Views</h3>
                          <ul class="list-inline two-part d-flex align-items-center mb-0">
                              <li>
                                  <div id="sparklinedash2"><canvas width="67" height="30"
                                          style="display: inline-block; width: 67px; height: 30px; vertical-align: top;"></canvas>
                                  </div>
                              </li>
                              <li class="ms-auto"><span class="counter text-purple">869</span></li>
                          </ul>
                      </div>
                  </div>
                  <div class="col-lg-4 col-md-12">
                      <div class="white-box analytics-info">
                          <h3 class="box-title">Unique Visitor</h3>
                          <ul class="list-inline two-part d-flex align-items-center mb-0">
                              <li>
                                  <div id="sparklinedash3"><canvas width="67" height="30"
                                          style="display: inline-block; width: 67px; height: 30px; vertical-align: top;"></canvas>
                                  </div>
                              </li>
                              <li class="ms-auto"><span class="counter text-info">911</span>
                              </li>
                          </ul>
                      </div>
                  </div>
              </div>
              <!-- ============================================================== -->
              <!-- PRODUCTS YEARLY SALES -->
              <!-- ============================================================== -->
              <div class="row">
                  <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                      <div class="white-box">
                          <h3 class="box-title">Products Yearly Sales</h3>
                          <div class="d-md-flex">
                              <ul class="list-inline d-flex ms-auto">
                                  <li class="ps-3">
                                      <h5><i class="fa fa-circle me-1 text-info"></i>Mac</h5>
                                  </li>
                                  <li class="ps-3">
                                      <h5><i class="fa fa-circle me-1 text-inverse"></i>Windows</h5>
                                  </li>
                              </ul>
                          </div>
                          <div id="ct-visits" style="height: 405px;">
                              <div class="chartist-tooltip" style="top: -17px; left: -12px;"><span
                                      class="chartist-tooltip-value">6</span>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <!-- ============================================================== -->
              <!-- RECENT SALES -->
              <!-- ============================================================== -->
              <div class="row">
                  <div class="col-md-12 col-lg-12 col-sm-12">
                      <div class="white-box">
                          <div class="d-md-flex mb-3">
                              <h3 class="box-title mb-0">Recent sales</h3>
                              <div class="col-md-3 col-sm-4 col-xs-6 ms-auto">
                                  <select class="form-select shadow-none row border-top">
                                      <option>March 2021</option>
                                      <option>April 2021</option>
                                      <option>May 2021</option>
                                      <option>June 2021</option>
                                      <option>July 2021</option>
                                  </select>
                              </div>
                          </div>
                          <div class="table-responsive">
                              <table class="table no-wrap">
                                  <thead>
                                      <tr>
                                          <th class="border-top-0">#</th>
                                          <th class="border-top-0">Name</th>
                                          <th class="border-top-0">Status</th>
                                          <th class="border-top-0">Date</th>
                                          <th class="border-top-0">Price</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                      <tr>
                                          <td>1</td>
                                          <td class="txt-oflo">Elite admin</td>
                                          <td>SALE</td>
                                          <td class="txt-oflo">April 18, 2021</td>
                                          <td><span class="text-success">$24</span></td>
                                      </tr>
                                      <tr>
                                          <td>2</td>
                                          <td class="txt-oflo">Real Homes WP Theme</td>
                                          <td>EXTENDED</td>
                                          <td class="txt-oflo">April 19, 2021</td>
                                          <td><span class="text-info">$1250</span></td>
                                      </tr>
                                      <tr>
                                          <td>3</td>
                                          <td class="txt-oflo">Rich Admin</td>
                                          <td>EXTENDED</td>
                                          <td class="txt-oflo">April 19, 2021</td>
                                          <td><span class="text-info">$1250</span></td>
                                      </tr>
                                      <tr>
                                          <td>4</td>
                                          <td class="txt-oflo">Medical Pro WP Theme</td>
                                          <td>TAX</td>
                                          <td class="txt-oflo">April 20, 2021</td>
                                          <td><span class="text-danger">-$24</span></td>
                                      </tr>
                                      <tr>
                                          <td>5</td>
                                          <td class="txt-oflo">Hosting press html</td>
                                          <td>SALE</td>
                                          <td class="txt-oflo">April 21, 2021</td>
                                          <td><span class="text-success">$24</span></td>
                                      </tr>
                                      <tr>
                                          <td>6</td>
                                          <td class="txt-oflo">Digital Agency PSD</td>
                                          <td>SALE</td>
                                          <td class="txt-oflo">April 23, 2021</td>
                                          <td><span class="text-danger">-$14</span></td>
                                      </tr>
                                      <tr>
                                          <td>7</td>
                                          <td class="txt-oflo">Helping Hands WP Theme</td>
                                          <td>MEMBER</td>
                                          <td class="txt-oflo">April 22, 2021</td>
                                          <td><span class="text-success">$64</span></td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
                      </div>
                  </div>
              </div>
              <!-- ============================================================== -->
              <!-- Recent Comments -->
              <!-- ============================================================== -->
              <div class="row">
                  <!-- .col -->
                  <div class="col-md-12 col-lg-8 col-sm-12">
                      <div class="card white-box p-0">
                          <div class="card-body">
                              <h3 class="box-title mb-0">Recent Comments</h3>
                          </div>
                          <div class="comment-widgets">
                              <!-- Comment Row -->
                              <div class="d-flex flex-row comment-row p-3 mt-0">
                                  <div class="p-2"><img src="https://therichpost.com/wp-content/uploads/2021/03/avatar2.png" alt="user" width="50" class="rounded-circle"></div>
                                  <div class="comment-text ps-2 ps-md-3 w-100">
                                      <h5 class="font-medium">James Anderson</h5>
                                      <span class="mb-3 d-block">Lorem Ipsum is simply dummy text of the printing and type setting industry.It has survived not only five centuries. </span>
                                      <div class="comment-footer d-md-flex align-items-center">
                                           <span class="badge bg-primary rounded">Pending</span>
                                           
                                          <div class="text-muted fs-2 ms-auto mt-2 mt-md-0">April 14, 2021</div>
                                      </div>
                                  </div>
                              </div>
                              <!-- Comment Row -->
                              <div class="d-flex flex-row comment-row p-3">
                                  <div class="p-2"><img src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" alt="user" width="50" class="rounded-circle"></div>
                                  <div class="comment-text ps-2 ps-md-3 active w-100">
                                      <h5 class="font-medium">Michael Jorden</h5>
                                      <span class="mb-3 d-block">Lorem Ipsum is simply dummy text of the printing and type setting industry.It has survived not only five centuries. </span>
                                      <div class="comment-footer d-md-flex align-items-center">

                                          <span class="badge bg-success rounded">Approved</span>
                                          
                                          <div class="text-muted fs-2 ms-auto mt-2 mt-md-0">April 14, 2021</div>
                                      </div>
                                  </div>
                              </div>
                              <!-- Comment Row -->
                              <div class="d-flex flex-row comment-row p-3">
                                  <div class="p-2"><img src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" alt="user" width="50" class="rounded-circle"></div>
                                  <div class="comment-text ps-2 ps-md-3 w-100">
                                      <h5 class="font-medium">Johnathan Doeting</h5>
                                      <span class="mb-3 d-block">Lorem Ipsum is simply dummy text of the printing and type setting industry.It has survived not only five centuries. </span>
                                      <div class="comment-footer d-md-flex align-items-center">

                                          <span class="badge rounded bg-danger">Rejected</span>
                                          
                                          <div class="text-muted fs-2 ms-auto mt-2 mt-md-0">April 14, 2021</div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="col-lg-4 col-md-12 col-sm-12">
                      <div class="card white-box p-0">
                          <div class="card-heading">
                              <h3 class="box-title mb-0">Chat Listing</h3>
                          </div>
                          <div class="card-body">
                              <ul class="chatonline">
                                  <li>
                                      <div class="call-chat">
                                          <button class="btn btn-success text-white btn-circle btn me-1" type="button">
                                              <i class="fas fa-phone"></i>
                                          </button>
                                          <button class="btn btn-info btn-circle btn" type="button">
                                              <i class="far fa-comments text-white"></i>
                                          </button>
                                      </div>
                                      <a href="javascript:void(0)" class="d-flex align-items-center"><img
                                              src="https://therichpost.com/wp-content/uploads/2021/03/avatar2.png" alt="user-img" class="img-circle">
                                          <div class="ms-2">
                                              <span class="text-dark">Jassa <small
                                                      class="d-block text-success d-block">online</small></span>
                                          </div>
                                      </a>
                                  </li>
                                  <li>
                                      <div class="call-chat">
                                          <button class="btn btn-success text-white btn-circle btn me-1" type="button">
                                              <i class="fas fa-phone"></i>
                                          </button>
                                          <button class="btn btn-info btn-circle btn" type="button">
                                              <i class="far fa-comments text-white"></i>
                                          </button>
                                      </div>
                                      <a href="javascript:void(0)" class="d-flex align-items-center"><img
                                              src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" alt="user-img" class="img-circle">
                                          <div class="ms-2">
                                              <span class="text-dark">Jassa
                                                   <small class="d-block text-warning">Away</small></span>
                                          </div>
                                      </a>
                                  </li>
                                  <li>
                                      <div class="call-chat">
                                          <button class="btn btn-success text-white btn-circle btn me-1" type="button">
                                              <i class="fas fa-phone"></i>
                                          </button>
                                          <button class="btn btn-info btn-circle btn" type="button">
                                              <i class="far fa-comments text-white"></i>
                                          </button>
                                      </div>
                                      <a href="javascript:void(0)" class="d-flex align-items-center"><img
                                              src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" alt="user-img" class="img-circle">
                                          <div class="ms-2">
                                              <span class="text-dark">Jassa <small class="d-block text-danger">Busy</small></span>
                                          </div>
                                      </a>
                                  </li>
                                  <li>
                                      <div class="call-chat">
                                          <button class="btn btn-success text-white btn-circle btn me-1" type="button">
                                              <i class="fas fa-phone"></i>
                                          </button>
                                          <button class="btn btn-info btn-circle btn" type="button">
                                              <i class="far fa-comments text-white"></i>
                                          </button>
                                      </div>
                                      <a href="javascript:void(0)" class="d-flex align-items-center"><img
                                              src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" alt="user-img" class="img-circle">
                                          <div class="ms-2">
                                              <span class="text-dark">Jassa <small class="d-block text-muted">Offline</small></span>
                                          </div>
                                      </a>
                                  </li>
                                  <li>
                                      <div class="call-chat">
                                          <button class="btn btn-success text-white btn-circle btn me-1" type="button">
                                              <i class="fas fa-phone"></i>
                                          </button>
                                          <button class="btn btn-info btn-circle btn" type="button">
                                              <i class="far fa-comments text-white"></i>
                                          </button>
                                      </div>
                                      <a href="javascript:void(0)" class="d-flex align-items-center"><img
                                              src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" alt="user-img"
                                              class="img-circle">
                                          <div class="ms-2">
                                              <span class="text-dark">Jassa <small class="d-block text-success">online</small></span>
                                          </div>
                                      </a>
                                  </li>
                                  <li>
                                      <div class="call-chat">
                                          <button class="btn btn-success text-white btn-circle btn me-1" type="button">
                                              <i class="fas fa-phone"></i>
                                          </button>
                                          <button class="btn btn-info btn-circle btn" type="button">
                                              <i class="far fa-comments text-white"></i>
                                          </button>
                                      </div>
                                      <a href="javascript:void(0)" class="d-flex align-items-center"><img
                                              src="https://therichpost.com/wp-content/uploads/2021/03/avatar7.png" alt="user-img" class="img-circle">
                                          <div class="ms-2">
                                              <span class="text-dark">Jassa<small class="d-block text-success">online</small></span>
                                          </div>
                                      </a>
                                  </li>
                              </ul>
                          </div>
                      </div>
                  </div>
                  <!-- /.col -->
              </div>
          </div>
          <!-- ============================================================== -->
          <!-- End Container fluid  -->
          <!-- ============================================================== -->
          <!-- ============================================================== -->
          <!-- footer -->
          <!-- ============================================================== -->
          <footer class="footer text-center"> 2021 © Rich Admin brought to you by <a
                  href="https://www.therichpost.com/">therichpost.com</a>
          </footer>
          <!-- ============================================================== -->
          <!-- End footer -->
          <!-- ============================================================== -->
      </div>
      <!-- ============================================================== -->
      <!-- End Page wrapper  -->
      <!-- ============================================================== -->
  </div>
  <!-- ============================================================== -->
  <!-- End Wrapper -->
  <!-- ============================================================== -->
</body>
</html>

 

2. Now friends, please do the following steps because this is the most important:

1. Please make “assets” folder inside public folder.

2. Please download css files, fonts and script files from below url and please all that files inside “public/assets” folder.

https://therichpost.com/bootstrap5admin.zip


Now we are done friends and please run your Laravel 8 project and see the admin dashboard home page.  Also and 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 appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.