You can add icons http://fontawesome.io/icons/ in this template?
Hi, we won't add it as part of the standard icon set (currently Ionicons has a good set). But if you are interested, you can install it by simply running "bower install font-awesome"
Then you will have to link the main stylesheet from the index file and copy the font files (ttf, woff, etc)

Let us know if you have any question or need assistance with this
Hi, is all the functionality and themes included in the AngularJS version?
I just bought 'Material Admin Responsive + Dark Skin', only to find out that the text editor and dark theme is only availible in the JQuery version.
Thanks /Peter
Hi, almost all features are available in all versions. When there's a difference between angularjs and jquery version, it is mainly because a plugin exists only for jquery or angularjs. In such case, we try to find a replacement that convince us for the missing version.
Regarding to themes, all versions support the same color combinations, even dark skin.
In the particular case of editors, we use Summernote which is available for both angular and jquery frameworks, so it's included in both versions.

Btw, you can check AngularJS and jQuery versions online:


Let us know if you have any question
Hi there, I purchased your theme and am attempting to incorporate the angular code into my .net MVC 5 project. I was wondering if you could give me some pointers or maybe some documentation on how to get started. I am fairly new to angular but already have the MVC project underway. Any guidance you can provide would be appreciated. Thanks, Rob
Hi, we don't have a guide but we can share some ideas and considerations.
- First you will have to copy all scripts and vendor assets and import into your project structure.
- Create a bundle for the application main scripts and another bundle for the main vendor scripts (those you see referenced from the index.html)
- When you create views you will have to use the following at the top to avoid serve the content with the entire layout, angular needs only the view content
Layout = null;
- Then you will need to create controllers with actions according to each View that is served.
- Read the documentation for the angular project in order to get some understanding of how this project works.
- For the styles you will have to use raw CSS files. If you want to use Less bundles, you can do something like this http://www.brendanforster.com/blog/yet-another-implement-less-in-aspnetmvc-post.html

Finally, those are some ideas to incorporate the template into an existent project but the main issue is that if your project already have a layout and a base structure, that will make a bit more complicated to integrate because this template was designed to build on top of it and you will have to adapt some core parts to work with your current project.

Btw, the MVC6 project already included could give you some ideas of the organization.

Hope this helps,
Thanks very much for the suggestions. I have started looking at the MVC6 project as a guide to get started.
I noticed that the demo version of the template has a datepicker at the bottom of the advanced view under forms. However, I don't see that in the MVC6 version of the project in the download. Can you provide the code for that datepicker? Thanks!
Correction, it's at the bottom of the Validation view, not the Advanced view.
Hi, the page where you see a validation with a datepicker corresponds to the angularjs demo. MVC6 version is based on the jQuery project that you can see also online. This version doesn't have a validation of datepicker in the demo, mainly because the datepicker plugin is just a wrapper around an input type=text which could use a standard validation, and beyond that performing a date validation is more associated with what your app expects (format, ranges, etc).
To capture the changes using the datepicker plugin you can do the following in your code

$('#datePicker').on('changeDate', function(e) {

More info about datepicker events: https://bootstrap-datepicker.readthedocs.io/en/latest/events.html

Let us know if you have any question or need assitance implementing this

I am using DataTable plugin. It is working fine but I would like to set default column order. How can i do it ?

Please help me asap.
Hi, try using the order property. For example

// uses zero-based index, where 0 is the first column.
'order': [[ 1, 'desc' ]],

I purchased this template because it's a beautiful design, but why is it so hard to modify and incorporate the angular version of it? :(

I have been working for 2 days now to figure out how to start customizing the scripts. The architecture is very hard to understand in the app.js file.
Hi, the app.js is generated from files under the 'master' folder, and it's basically the full set of component scripts concatenated into one single file, that's why it looks hard to read. To work with a more modular organization you have to use the structure in the master folder together with Gulp in order to compile and serve the template. You can find more information about this in the docs.

Let us know if you have any question
I purchased this before registering here.

I have a problem with the menu, if i remove some items, and the menu has 1 submenu, the menu disappear on mobile when i click on the submenu.

Also, on app.css line 4021 on the main-container class, you have this -webkit-overflow-scrolling: touch;
Which cause the bootstrap modal to bug on mobile (the modal appear behind the header). I spent many hours to find this.

Hi, we have contacted you by email regarding to the menu issue.

Regarding to modal issue, it's a recently known issue and problem seems to be related with the position of the modal markup. It' should be added as a direct child of the body to avoid dealing with the inheritance of other components z-index

Are you working with html5/jQuery or Angularjs project?
It's the overflow:auto on the main container which caused this.
Is this related to the modal issue?
dgrobler PURCHASED
I've just purchased the centric with the intend to use with reactJS. Without looking into more details, the dependencies don't work: Here is the npm output:

npm WARN package.json Dependency 'style-loader' exists in both dependencies and devDependencies, using '[email protected]^0.13.1' from dependencies
npm WARN package.json Dependency 'webpack' exists in both dependencies and devDependencies, using '[email protected]' from dependencies
npm WARN package.json Dependency 'webpack-dev-server' exists in both dependencies and devDependencies, using '[email protected]' from dependencies
npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/dgrobler/.nvm/versions/node/v4.3.2/bin/node" "/Users/dgrobler/.nvm/versions/node/v4.3.2/bin/npm" "install"
npm ERR! node v4.3.2
npm ERR! npm v2.14.12

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected]^15.3.0
npm ERR! peerinvalid Peer [email protected] wants [email protected]>=0.14.0
npm ERR! peerinvalid Peer [email protected] wants [email protected]^15.3.0
npm ERR! peerinvalid Peer [email protected] wants [email protected]^0.14.0 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants [email protected]^0.14.0 || ^15.0.1
npm ERR! peerinvalid Peer [email protected] wants [email protected]^0.14.0 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants [email protected]>=0.14.0
npm ERR! peerinvalid Peer [email protected] wants [email protected]^15.2.1

Any ideas?

Hello Dirk, we don' see those message when installing package. First, try ignoring those message and continue installing bower package and the run "npm start" to check if there are only warnings messages. Alternatively, try clearing your npm cache with command "$ npm cache clean" and run npm install again
Hi again Dirk, after checking a bit more we found an issue with the case of some files referenced in the code (scss) that could affect *nix based system. Not related with npm but affects the build of app. If you can send us a message via our profile page we can send you the fixed files before release the update.

dgrobler PURCHASED
Hi again,

Another question regarding building. In Angle you have been using gulp, I was very please with that. Here you just rely on webpack. Will you introduce gulp at some stage?

Hi again, the React version in Centric only relies on webpack because is not needed in this project. In Angle we use because of the original source structure but we found a bit more simple to work over one single too like Webpack instead of combining it Gulp, both approaches are Ok but after some requests, we found more simple for end users to deal with one single tool when trying to customize the build process.
Thanks for the update, is an excellent work, you thought about bringing this template to Angular 2 ?
Hi, yes, for the moment we don't have an ETA, we will update to Angular2 as soon as it become stable. Currently we are playing with the new features and learning about best practices.

I am using this template with laravel. And in laravel gulp tasks are defined. So I was thinking is there a scss file which imports all the components in a proper order which I can use to build the css?
Hi, as you may noted the current gulp setup reads all files under components and there's not entry point where we @import everything in order.
Anyway, in the meteor project we had to used the approach of adding @import explicitly so you can use that as a reference to include in order all scss files in your project.

Please check the file /meteor/imports/ui/components/app.scss

Let us know if you have any question
I have noticed you have imported variables and colors and other depended files in every scss file that need it. So the order doesn't really make a diff. Thank you. :D

Although I have one more problem, You have compiled all the example related js in app.js. Which is actually breaking few things in my project. It will be helpful if you can maintain example related js and app related js separately. Because you are adding event listeners and graphs to the example CSS IDs Classes.

Thank you.
While I was going through html5jquery folder these are the js files I found that shall be added in app.js according to me. Just helping you out to sort things easy :D

'tables/bootgrid.js', // Change the ids to classes

Btw.. Great template. I like it a lot. Its clean and neat :D
Hi again, thanks for the clear information. You're right, some parts of the template should be divided into core and examples, usually seed projects are useful for such purpose so there's a start point with the extra features the becomes optional across different implementations, we'll take a look into your suggestion for future release.

Thanks again
sonicviz PURCHASED
Nice template.

Any chance of doing it for Meteor with React?

HI, thanks sonicviz, for the moment we don't have plans to include soon a project mixing meteor with react. We know since v1.3 it's officially supported so we will keep it in our pending features list.

Hey, great template.

Im' trying to integrate Centric with a Node backend, I already did the config in order to run the webpack server and the node server. But when I'm trying to fetch from the client, I'm getting cross domain issues because they are running in different ports. I know that I need to config a proxy in webpack but I just can't make it work. If you know, can you please provide me some directions. Thanks for precious time.
Ok, it's done.

I just need to configure my express server like this:

app.all('/api', function(req, res, next) {
//allow http://localhost:3000 (centric webpack server) to make request to the server
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
Great! Thanks @luiscript
We'll keep this in mind for other users reference.

Just in case, remember that webpack server is mainly for development and in production mode you will use your online server
Yep, thanks…

I'm using the react version and is throwing a bunch warnings about undefined props, do you have any idea what's causing this messages. I did a fresh install, npm install && bower install, the result is the same. I posted an image with the warning messages.

Any idea about that props ?

There are plans to make the Timeline page?
(for example: http://iarouse.com/dist-slim/v3/index.html#/ui/timeline)
Hi, there's a similar timeline already implemented here

It's good!
I was see version 1.2. (/centric/v1.2), Sorry))
Hi! Great template...

Just a couple of minor issues in the ReactJS version:

>The datepicker popup refuses to close once you select a date, it keeps opening up again.
> In the Material form, when you tab into the First Name or Last Name Fields, enter a value, and tab out again, the Label goes back to its original place, which garbles the entered text.

Both of these don't seem to be an issue in the AngularJS version. Any chance for a "hotfix"?
Hi, thanks for report this. Both are known issues that will be addressed in the next update.
You can fix them as follows

1- Can be solved by adding 'autoclose' option, like this

autoclose: true

2- This is an issues specific for non angular project, it's missing something to check the input has been filled. Please use the following as a quick fix for this. It adds a handler to check the input every time it changes and add/remove a 'has-value' class to keep the float label in the right position.

$('.mda-form-control > input').on('change', function() {
$(this)[this.value.length ? 'addClass' : 'removeClass']('has-value');

Let us know if you have any question
This worked, thank you for the quick reply.

When will you release the next version?
Hi, thanks for the feedback. For the moment we don't have a release date for a new release but we expect to be soon, it will be mainly focused on update all dependencies with the necessary changes to adapt to new versions, and a new angular2 project.

Great template guys ! love the React version. The demo live for React is working good, but when I follow the steps I'm getting some errors on the UI


Thanks !
Hi, we couldn't replicate the issue, We tried installing from scratch the last release of Centric 1.4.1 and it's not throwing those message. We know those messages may be related with the version of react-bootstrap used, in lasts releases we had to change markup after updated a version. Have you changed or updated the version?
Hi, it's a Greate template. I purchased your template and I am attempting to implement with MEAN, if this possible. I was wondering if you could give me some pointers or maybe some documentation on how to get started. I am fairly new to angular. Thanks
Hi, we don't have a guide to migrate this template to meanjs framework. Anyway, if you are using mean 0.4.2 you will find that the folder structure under 'modules' is similar to the structure of 'components' folder of the template, you will need to replace the JADE templates with html version because meanjs doesn't support jade out of the box. You can find the html version of each file under folder 'app/views/'
Beyond this point, you need to review paths to match the new structure of meanjs.
We suggest you to implement first components like core, common, and utils and once you have those working go adding more in order to avoid many errors messages at the same time. Also, the menu component works similar but not the same, and this will require an adaptation of markup and usage.
From our experience, we can tell you we have migrated our other product "Angle" to meanjs and it's not a very easy task but if you have the time and a decent knowledge of the meanjs framework internals it could be done.

Let us know if you have any question.
reynaldio PURCHASED
Do you have angular 2 and bootstrap 4 version of this?
Hi, not for the moment, but it's in our plans. In first place we will prepare an Angular2 project, and then a Bootstrap4 version (mainly because bs4 is still in alpha)


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 $20
  • HTML Template
Bootstrap: Compatible with 3.3.x
  • Responsive
  • Fluid
  • Fixed-width
  • IE 9, 10, 11
  • Latest Chrome
  • Latest Edge
  • Latest Firefox
  • Latest Safari
Uses Less:Yes
Uses Sass:Yes
Labels: angularjs, dark, html5, material, meteor, mvc, react, responsive admin template, rtl, svg
Released:2 years ago
Updated:10 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