Spice Hotel | Bootstrap 5 Admin Dashboard Template + UI Kit

version 2.0

Thank You

Thank you for buying Spice Hotel Admin and supporting Redstartheme. Feel free to contact me if you have any questions.

Also, email me if you have any feature requests or advises, I'll happy to help you.

Our promise is that Pleasure will be constantly kept up to date.

Thank You.

Overview

  • Item Name : Spice Hotel | Bootstrap 5 Admin Dashboard Template + UI Kit
  • Item Version : v 2.0
  • created: 20/03/2018
  • latest update: 14/07/2022
  • by: RedStarTheme
  • email: redstartheme@gmail.com

Introduction #back to top

The Spice Hotel is a Bootstrap 5 admin dashboard template with huge collection of reusable UI components and integrated with jQuery plugins. Template have also Material Design components, which you can use in your application.

Spice Hotel Admin is a lightweight and easy to use, clean and polished, resourceful and reliable, responsive HTML5 and Bootstrap 5 admin template.It works natively on mobile devices, making it an accessible way of managing your own website from wherever you are.

Folder Structure #back to top

Admin/

	Documentation/
	├── css/
	├── Fonts/
	└── Images/
	└── Js/
	└── index.html/
	
			
	Source/
	  └── assets/ 
	  └── fonts/
	  └── .html/

Custom Theme #back to top

The Spice Hotel Admin comes with 21 different combinations themes, User can select any theme as per her/his choice.

Key point in Spice Hotel Admin is the custom theme, You cam set ANY COLOR theme of your choice. You need to change in theme-color.css file in css folder. You can set color for --sidebar-color --sidebar-font-color --logo-color --header-color value as per your choice. Just delete header-white dark-sidebar-color logo-dark from body tag and add header-custom custom-sidebar-color logo-custom class in body tag. Thats it !!!

Template Structure#back to top

Template Structure

This template is fully responsive and fluid layout. Following are the general structures.

Page Head   

Below code is used at the beginning of all HTML pages

							<!DOCTYPE html>
							<html lang="en">
							<head>
							    
							    
							    
							    
							    
							    Spice Hotel | Bootstrap 5 Admin Dashboard Template + UI Kit
							    
							    
								
							    
							    
								
								
							    
								
								
								
								
								
							    
							    
							    
								
								
							     
							
							 </head>

Main Structure   

Following are the markup of main structure.

                            

						        
						        

									...
								

								
								
 

								
								

									
									

										

											........
										

									

									
									
									

										 

											.......
										

									

									
									
									

										

										   ...... 
										

									

									
								

								
								
								

									................

Left Side

Following are the markup of left side. Which contains logo and side bar navigation.

Left Navigation Menu

Following are the markup of left navigation. All Pages can be navigate using Left Navigation Sidebar.

Quick Sidebar

In Quick sidebar chat & setting tab are available, using that you can chat with user and setting tab is used for layout related setting in application.

							 
				            

				                

				                    
				                    

				                    	

											tab 1 for theme change..........
										

				                         
				 						

				                        	

					                            

					                                
Online

					                                
					                                tab 2 for chat................... 
					                                
					                            

				                            

				                        

				                         
				 						 
				 						

				                            

				                                
Layout Settings

					                            tab 3 for setting.............

Header

Header section structure are as follows. Which contains toggle button, Language sections, and notifications.

							 
					        

					            

					                
					                
					                
									
    
										
    • 
									

					                 

					                 
										...............search bar...............

Activate parent

To activate Parent Menu have to add class "active".

							
  •  ... 
    •

    Activate parent & sub menu

    To activate Parent Menu with Sub Menu have to add "active" class and "selected" in span.

    							
  • 
								
									
									Email
									
									
								
								
							
    •

    Material Design Template#back to top

    Require Plugins

    For use material design component you just required to add plugins in template. Followings are require plugins for material design template

    							
						    <link rel="stylesheet" href="css/material_style.css"/>
						   	
						    <link rel="stylesheet" href="js//material-datetimepicker/bootstrap-material-datetimepicker.css" />
						    
							<script src="js/material/material.min.js"></script/>
						    <script src="js/getmdl-select.js" type="text/javascript"></script>
						    <script type="text/javascript" src="js/material-datetimepicker/moment-with-locales.min.js"></script>
							<script type="text/javascript" src="js/material-datetimepicker/bootstrap-material-datetimepicker.js"></script>
							<script type="text/javascript" src="js/material-datetimepicker/datetimepicker.js"></script>

    Layouts#back to top

    You can visible the top header, left side and footer fixed to its position.You can also change this from setting tab of chat panel.

    Boxed Layout

    To enable boxed layout please add class .page-boxed to body tag, and need to add container class in <div class="page-header-inner container"> div. and place whole <div class="page-container"> tag in <div class="container"> div. See bellow sample code.

    								
					        
    
					            
					            
    
					                
					 			
    
					 				.....sidebar code......

    Sidebar Collapse Layout

    To enable collapsed layout please add class .sidemenu-closed to body tag, and add sidemenu-closed class in sidemenu-container ui tag. Sample code:

    								
					 			
    
					 				
    
						                
    
						                    
      
						                        
    • 
						                            
      
						                                
						                            
      
						                        
      • 
						                        
						                        ......sidemenu code.........

    Horizontal Layout

    To enable horizontal layout please add class .page-full-width to body tag.

    								<body class="page-header-fixed sidemenu-closed-hidelogo page-content-white page-md page-full-width header-white dark-sidebar-color logo-dark">

    Hover Sidebar Layout

    To enable hover sidebar layout please add class .sidemenu-hover-submenu in ui tag in sidebar .

    								 
					 			
    
					 				
    
						                
    
						                    
      
						                        
    • 
						                            
      
						                                
						                            
      
						                        
      •

    Right Sidebar Layout

    To enable right sidebar layout please add class .sidemenu-container-reversed in body tag.

    								<body class="page-header-fixed sidemenu-closed-hidelogo page-content-white page-md sidemenu-container-reversed header-white dark-sidebar-color logo-dark">

    Fixed Header

    To enable fixed header please add class navbar-fixed-top in page-header div tag.

    								<body class="navbar-fixed-top">

    Fixed Footer

    To enable fixed footer please add class page-footer-fixed to body tag.

    CSS #back to top

    CSS files are in the css/ folder of the template. Spice Hotel Admin built on Bootstrap 5 framework.

    The below code should be included in every pages in the <head> tag

    JavaScript#back to top

    All javascript files are in the js/ folder of the template.

    Following js code should be included in every page before the <body> tags.

    New Page #back to top

    To create a new page, you can use blank_page.html And For Material Design page you can use material_blank.html which provides basic page layout which you can extend and modify further.

    Fonts #back to top

    Template uses Poppins font from google fonts.

    								<https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css" />

    Credits #back to top

    Below is the list of all plugins and external resources used to power this template.

    Version History (Changelog) #back to top

    Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template.

    Changelog

    									-----------------------------------------------------------------------------------------
									Version 2.0 - July 13th, 2022
									-----------------------------------------------------------------------------------------
									 -- Update Bootstrap 4 to 5
									 -- Update Chart, Calendar, Jquery library to latest version
									 -- minor bug solve
								  
    										-----------------------------------------------------------------------------------------
                                        Version 1.1 - Nov 15th, 2019
                                        -----------------------------------------------------------------------------------------
										 -- Date picker change
										 -- minor bug solve
                                      
    										-----------------------------------------------------------------------------------------
                                        Version 1.0 - Feb 25st, 2018
                                        -----------------------------------------------------------------------------------------
										 -- Initial Release