how can I use Spinners in jQuery Version.
I want to Show Spinner until the Site loaded.

Hi, you can try to add the spinner markup (the one of your choice, whirl, loader.css, etc) using a container element that will cover the entire page. For example, add right next to <body> element a <div> with class "preloader" then add a custom css like this:
.preloader {
position: fixed,
z-index: 9999; // cover evrything
top: 0; right: 0; left: 0; bottom: 0;
background-color: white;

Then inside that element add the markup for the spinner of your choice and play with css to place it in the center and in a corner of the screen, depending how you plan to show the spinner.

Finally, from JS you can use the following snippet to hide the prelaoder container

// run when the page is fully loaded including graphics.
$( window ).load(function() {

Please consider that in the case of the jQuery project, the spinner will be loaded for every page, unless you add it manually to some pages (different from angular for example where the loader text is shown only once due to how the framework works).

i tried to integrate in vs2017 dotnet application (with out dotnetcore).
Runninng without cli with index.html as start page
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
System.import('/app/main.js').catch(function(err){ console.error(err); });

Iam getting the below errors
Loading typescript
Unable to load transpiler to transpile http://localhost:54950/node_modules/ngx-bootstrap/accordion/index.js
Instantiating http://localhost:54950/node_modules/ngx-bootstrap/accordion/index.js
Loading http://localhost:54950/app/shared/shared.module.js
Loading /app/main.js
at fetch.js:37
at ZoneDelegate.invoke (zone.js:391)
at Zone.run (zone.js:141)
at zone.js:831
at ZoneDelegate.invokeTask (zone.js:424)
at Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:595)
at <anonymous>
Hi, it seems you are using SystemJS and the project provided was prepared to work with Webpack setup. We know it's not exactly the same setup and it may require some modifications that we are not aware of due to we don't have experience with SystemJS
For example, typescript compilation is performed by Webpack loaders and changing that means to configure another way to load typescript correctly.
Optionally you can check the ngx-bootstrap for systemjs errors, a similar issue found is https://github.com/valor-software/ngx-bootstrap/issues/1588

Where can i see the Webpack.config.js in the project?,..if i want to setup webpack in vs 2015 without using the SystemJs what are the steps required?
Hi, the webpack.config.js can be found in the root folder of the project, "netcore-angular5/Angle/Angle/webpack.config.js"
You will need also the package.json included in the project in order to install dependencies that are required by webapck like loaders and other features.
Please consider that the template was designed to build your application on top of it and not to be integrated with another application, meaning, if you have separated components already created you can try to add them to the existing structure of the template with routes, views, etc. But if your application relies on an existing layout and structure, it's necessary to adapt it the structure of the template, otherwise you won't be able to compile the files correctly

Let us know if you have any question
I want to use foldcode property for code editor in my project. How to add this property to my code editor component ?

Hi, for what project version do you want to add this (angular1.x, angular5, etc)?
Did you already tried to add it as it's sated in the their site https://codemirror.net/demo/folding.html ? Did you find any issue with it?

My project version is angular5. Yes, I already tried. But it is not working. Can you help me about how to add foldcode property to my code editor component?

Hi, please follow this instructions to the folding addon for Codemirror

1- Edit file src/app/routes/extras/codeeditor/codeeditor.component.ts and add the following imports (after the codemirror import)
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/brace-fold.js';
import 'codemirror/addon/fold/xml-fold.js';
import 'codemirror/addon/fold/indent-fold.js';
import 'codemirror/addon/fold/markdown-fold.js';
import 'codemirror/addon/fold/comment-fold.js';

2- Then edit src/app/routes/extras/codeeditor/codeeditor.component.scss and import the css of the addon
@import '~codemirror/addon/fold/foldgutter.css';

3- Finally, add to the codemirror options the following entries
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]

Please note that this works with JS files and currently we don't have one in demo files for codemirror. There was a .ts files added but after problems with the compiler we disabled it. Add or modify an entry in file assets/codemirror/filetree.json to show a JS in the file tree and when you load it, the folding icons should appear next to the line numbers.

Thanks, it is working :)
Hi I'm using Angular 5 + CLI

In menu.ts file we can add menu items and links
i've something like this: const Configurations = {
text: 'Configurations',
link: '/test',
icon: 'icon-chemistry'
in the above case instead of '/test' i need to assign it with this :
" window.location.assign('/'+window['testlink']) " when i do this
const Configurations = {
text: 'Configurations',
link: window.location.assign('/'+window['testlink']) ,
icon: 'icon-chemistry'
error is thrown : Argument of type '({ text: string; link: void; icon: string; } Type 'void' is not assignable to type 'string'.

how can solve this issue?
Hi, unfortunately is only possible to use a string in the "link" entry of the menu configuration, because is used as a value of the [routerLink] attribute for each sidebar item. The value you can use is a route path already defined in the list of routes for your application that .
As a possible approach, you can create a route that will load a component, that component has a constructor function that you can use to perform an action like you want soon as component is created.
Anyway, please consider that ti could present some issues if you change routes manually outside the angular-router control, no tested before but just a consideration.

Let us know if you have any question

my changes in layout.scss doesn't appears in my app, I´m running "npm build" and "npm start" and nothing happens.

I also add a new scss file and import it in app.scss and none style is added to application too.
I fact, in react seed I can´t add a spinner SCSS to a project

I'm getting the following errors

$ npm install
$ npm start

> webpack-dev-server --config webpack.dev.js --inline --progress --port 3000 --open

10% building modules 2/2 modules 0 active
Project is running at http://localhost:3000/
webpack output is served from http://localhost:3000/
404s will fallback to /index.html
10% building modules 6/6 modules 0 activewebpack: wait until bundle finished: /
68% building modules 960/988 modules 28 active ...es/fullcalendar/dist/fullcalendar.css(node:6815) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.
960 modules

ERROR in ./app/Vendor.jsx
Module not found: Error: Can't resolve '../node_modules/whirl/dist/whirl.css' in '/templates/WB04HF123/reactjs/app'

ERROR in ./app/Vendor.jsx
Module not found: Error: Can't resolve '../node_modules/jqgrid/js/jquery.jqGrid.js' in '/templates/WB04HF123/reactjs/app'

ERROR in ./app/Vendor.jsx
Module not found: Error: Can't resolve '../node_modules/jqgrid/css/ui.jqgrid.css' in '/templates/WB04HF123/reactjs/app'

ERROR in ./app/Vendor.jsx
Module not found: Error: Can't resolve '../node_modules/jqgrid/js/i18n/grid.locale-en.js' in '/templates/WB04HF123/reactjs/app'
webpack: Failed to compile.

In Vendor.jsx, should be:

import '../node_modules/@jh3y/whirl/dist/whirl.css';

instead of:
import '../node_modules/whirl/dist/whirl.css';


import '../node_modules/jqGrid/css/ui.jqgrid.css';
import '../node_modules/jqGrid/js/jquery.jqGrid.js';
import '../node_modules/jqGrid/js/i18n/grid.locale-en.js';

MacOS and Linux are case sensitive for paths.
Hi @albertomr86, thank you so much for report the issue and also share the solution!
We'll add the fix in next update
In JQGrid, If I add a filter toolbar, the textboxes have a very small size as compared to the underlying font used in it.

{ label: 'Category Name', search: true, searchoptions: JSON.parse('{"sopt": ["cn","eq"]}'), name: 'CategoryName', width: 75 },

.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });
HI, please use the following CSS to override default and other styles that affects the inputs.
These rules try to emulate to the look an feel of bootstrap form control inputs

.ui-search-toolbar input[type="text"] {
font-size: 14px;
height: 35px;
padding: 6px 16px;
border: 1px solid #dde6e9;
border-radius: 4px;
color: #3a3f51;
font-family: inherit;
font-weight: normal;
.ui-search-toolbar input[type="text"]:focus {
border-color: #66afe9

Thanks for for report this issue.

Let us know if you have any question

Im using the template with Angular 4. Im trying to use summernote but I got some errors.

I have add ""../node_modules/summernote/dist/summernote.js" to ".angular-cli.json" and the styles, but I have got this error:

core.es5.js:1084 ERROR Error: Uncaught (in promise): TypeError: $node.attr(...).tooltip is not a function
TypeError: $node.attr(...).tooltip is not a function

Have I to include another library or something else?
Hi, summernote requires standard tooltip from bootstrap, add before the path the summernote the following line:


You will need stop compiler and run again,

Let us know if you have any question
Hi! Any news on the BS4 version yet?
Hi, we plan to be releasing the version for html5 jquery with bootstrap 4 at the end of February, then will start to migrate the rest of the projects.

Let us know if you have any question
Nice! Any plans to use Webpack instead of Gulp?
Yes, it's in plan. The first release of Bootstrap 4 version will continue using Gulp, we have already moved the dependency manager from bower to npm so that's the main change for a webpack support.
Webpack 4 is also very close so we would like to put hands on that last version which seems to provide very good improvements over v3

Let us know if you have any question
Awesome! Thanks!

I want to know that is there any support for RTL in Angular 5 + CLI template ? because i couldn't find it anywhere in the template and offside bar's RTL radio button is commented out. Any kind of help would be appreciated.
Hi, regarding to RTL, it's only possible by pre-processing the styles with 'rtlcss' tool . This project doesn't support live switch of styles (between rtl and ltr) because the RTL mode is defined at build time but not possible to generate both stylesheets for live switch. If this is suitable for you, after purchase please send us a message and we will send you detailed instructions to implement RTL.

Let us know if you have any question

left timeline items' arrow is not shown. the right items are OK.
could please review the demo, there are items that are not associated with icon. Is this done intentionally or there is something wrong?
Hi, thanks for report this.
Regarding to popover arrows, there's a typo in the left popovers, they need also the "left" class to place the arrow, we haven't noticed that and will fix them on next update.
Regarding to second comment, icons are optional and will be placed automatically if you add an element with class "timeline-badge", so you can create a timeline with or without icons (showing only the line in the middle)

Let us know if you have any question
I'm currently trying to get the current version of angular5-seed running, but installing node 6.x with npm 3.10.9 (as mentioned in the comments here) is a nightmare, because when installing 6.10, 3.10.10 is default and running "npm install -g [email protected]" breaks npm completely. Long story short, would you please consider supplying a "Dockerfile" in the samples, so we can create and run a container with your configuration? I tried for hours now and had no success getting to start the newest samples, so I'm not even considering updating my angular2 project to angular5. Being able to run "docker build " would be really nice, to just set up the samples :)
Hi, sorry but we couldn't fine any recent comment stating the npm 3.10 is required.
we are currently using
> npm 5.6.0
> node v8.9.4
and running without problems, Some deps were working only on node v6 but this doesn't seem to be a problem now. Could you let us know if you there any error for you using mentioned version?

I am using the Angular 5 version and would like to use the sidemen tree not only to route to pages, but also launch external webpages. How would I add e.g. http://google.com to menu.ts ?
Hi, in the menu definition (menu.ts) you have to use "elink" entry instead of "link" external links.

Let us know if you have any question
I guess I found the answer in another comment. I will laugh a page and put the links there
Hi again, thanks for the update!

how i can change FullCalendar language to German?

Thank you
Hi, for what project do you need this (angular, jquery, etc) ?
Btw, here you can find docs about language setting in fullcalendar https://fullcalendar.io/docs/text/lang/

Let us know if you have any question

I want to use the template for MEAN stack angular 5, is it compatible?
Hi, the current meanjs is fully integrated with angular1.x and it's not compatible with angular5
Perhaps you could try the idea from this post which shows how to add mongodb and express into an @angular/cli project

Let us know if you have any question
1. Is latest version supports RTL fully if we choose Angular 5 as a development framework and not only HTML?
2. Is it dependent on JQuery UI elements? What about if we don't want the jQuery dependency


1- RTL is supported by pre-processing the styles with 'rtlcss' tool . This project doesn't support live switch of styles (between rtl and ltr) because the RTL mode is defined at build time but not possible to generate both stylesheets for live switch. If this is suitable for you, after purchase please send us a message and we will send you detailed instructions to implement RTL.
2- jQuery is required. Some components like sidebar relies on jQuery so for the moment is not possible to be removed.

Let us know if you have any question

I need your assistance with modal forms where by I place the code on top of js script and before closing tags and the entire page gone dark until i refresh the page.
Hi, for what project do you need this (angular, jquery, etc) ?
Please describe also the issue, what changes did you performed?

jquery project.

I did not perform any changes.
I have got solution already. I just place modal div out of wrapper content and its working.
Thanks for feeback!
That's right, the modal markup should be added right before the closing body tag to avoid conflicts with the stacking context of the layout elements.

Hi there, my company uses your template, really getting on well with it, good work!

One thing I'm trying to do and struggling a bit is to get a sticky column (e.g. moves down with scroll) working (within the context of a bootstrap grid in the content) i.e.


I've tried a few different approaches with angular plug ins and such, but so far I'm struggling to get the behaviour in the context of this template.

I'm wondering if you could provide any pointers on how you'd make a sticky column work within the template, and would you perhaps consider including this behaviour in one of the sample pages?


Hi, this may be some issue with the layout fixed we use in the theme, just to confirm, do you need it for the angular 1.x project?

I would like to use your theme service to load a theme when the application loads. Setting themes on the fly works fine, but I can't work out how to load a theme when the application loads. What is the best way to do this?
Hi, for what project do you need this (jquery, angular, etc) ?
It depends on the project, but the general idea is to inject a stylehseet of the selected theme after all other styles.

Let us know if you have any question
I’m using the angular version. There doesn’t appear to be any lifecycle hook where I can run setTheme in the theme service that actually changes the theme on login.
I would like to know the answer to this as well. I'm also using the angular version. Can't find a way to load the selected theme from my DB.
Hi, in the file themes.service.ts each theme is loaded by requiring the content of the stylesheet. That content is stored on each variable themeA, themeB, etc.. Then we use an injectStylesheet method that puts that content into the head section of the page, using a style tag. The only public method is "setTheme" but is limited to themes used in demo. Anyway, this could be easily modified (and it's a good feature for a future version) to allow inject any stylesheet content, if you are interested please send us a message via our profile page and we will send you a modified version of the themesService with usage example.


Write a comment

This is a great way to give the seller feedback and ask them questions about their item.

You must sign in to write a comment

Sign in or sign up to make a purchase


Licenses: Details »

Single application $28
  • HTML Template
Bootstrap: Compatible with 4.x
  • Responsive
  • Fluid
  • Fixed-width
  • IE 10, 11
  • Latest Chrome
  • Latest Edge
  • Latest Firefox
  • Latest Safari
Uses Less:No
Uses Sass:Yes
Topic: Internet & Web
Labels: admin, admin template, angularjs, material, meanjs, meteor, mvc, rails, responsive, rtl
Released:4 years ago
Updated:2 months ago
Sold exclusively on WrapBootstrap


Signed up 4 years ago

Need a front-end template?

About Bootstrap

Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex.

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples.

Built to support new HTML5 elements and syntax with progressively enhanced components.

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.

Tested and supported in Chrome, Safari, Firefox, Internet Explorer, and Opera.
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Edge
  • Internet Explorer 10/11
  • Latest Opera

Features & includes

Bootstrap provides an unparalleled array of features and reusable components that let you hit the ground running:

  • Responsive 12-column grid
  • 12 custom, modular jQuery plugins
  • CSS styles for forms, navigation & more
  • Dozens of reusable components
  • Components are scaled according to a range of resolutions and devices
  • Built with Sass (CSS included)
  • Complete styleguide documentation