Hi, you have bug in template :)
if i collapse left sidebar and resize window to small and then back to max sidebar is not collapse and i must 2 times click to collapse :)
That's right, thanks for report it. Currently the sidebar restores itself on resize but we will take a look at the "two click" issue.

geezreno PURCHASED
Hi there,

Just want to ask, if its possible to use this template without angular?
i don't understand angular.. but i like your design..

geezreno PURCHASED
oh never mind, it's only work with angular..
When you update again can you change typo.less so the google font path is url(// rather than url(http://
most admins will be running over SSL (You'd hope) :p
Sure. We have it covered for the next update :)
Your application is very nice, I would like to request that you find an alternative to generate graphs that doesn't use PHP or a serverside language.
Originally, PHP scripts were included as an example of how to generate JSON responses from a backend script. We have in plans to move it to plain json files for all requests.

Thanks for feedback.
c-myers1 PURCHASED
I love the theme a bit more each day.

Can you point me to exactly where in CSS files I can control the following globally:

- change the background colour from the light grey to pure white
- change the font size generally when on mobile (without breaking the layouts) as it comes of pretty tiny on mobile phones.

Thank you
Hi, sorry for the delay.
- You can edit variables.less and change the value of the @gray-light variable. Or via the file app.css replace all occurrence of the color #e4eaec
- Replacing the fonts size requires a bit of work. You can change the body font using media queries to impact all elements that inherits the font size. But some elements that has its own size you need to override them inside the @media block.

The best approach is that you analyze those components that you want to edit and then add the specific css in your own custom.css so you override values without touching the package source. That will be help you when you want to apply a new update.

abcallow PURCHASED
Hi there,

First of all thanks for this awesome theme!

I have a problem, I have a large number of rows and I want to do
a server side pagination using angular-datatables.


How can install and use angular-datatables within the theme?

I have tried to add the library in

.constant('APP_REQUIRES', {
scripts: {
'dataTables.colVis.min.js', 'vendor/datatable/extensions/ColVis/css/dataTables.colVis.css'],
'angular-datatables': ['vendor/angular-datatables/angular-datatables.min.js'],

And then trying to inject in the resolveFor

.state('app.mypage', {
url: '/mypage',
title: 'mypage',
templateUrl: basepath('custom/mypage/list.html'),
resolve: resolveFor('angular-datatables')

Then I do:

myApp.controller('DataTableAngularController', ['$scope', function ($scope, DTOptionsBuilder, DTColumnBuilder) {

$scope.dtOptions = DTOptionsBuilder.newOptions();

Throws error Cannot read property 'newOptions' of undefined
So basically DTOptionsBuilder is undefined.

Any ideas, help?
Hi, sorry for the delay.

Since angular datatables is a module you need to use the module option of the APP_REQUIRES constant. Thus, ocLazyLoad, in addition to load the assets, it can inject the module as a dependency of the application.

Just add

modules: [
{ name: 'angular-datatables', files: ['vendor/angular-datatables/angular-datatables.min.js'] }

Please let us know if you have any question

The purchase includes PSD or AI files?

Hi, no currently is doesn't include PSD or AI files.

Hi, I see quite a few updates coming through for this theme which is great. Is there a changelog somewhere, so we can judge whether to take the time to merge updates into our project? Thanks!
Hi, in the item description page there's a button with the changelog.
Right below the item picture.

Doh - good stuff - thanks
Today, I started to understand what you done on this template.
I'm reading the documentation. I have already installed nodejs on my local computer (windows 7) but when I ran npm install on master directory I got many ERR! on the terminal. Here is one of them:

npm ERR! git clone git://github.com/geedmo/css-flip Cloning into bare repository

I don't know if that works on my local computer or must be done on a webserver, but, I like to do all my projects locally then upload them to my VPS.

I'm pretty new on angular too but that was the reason that i bought this, because I want to understand it.
Hi, is possible that you don't have git installed. Try downloading git for windows here https://msysgit.github.io/

Nodejs is used to compile the source files (jade, less, js) into the files the app uses. If you want to start with AngularJS is better that you take a look first at the files in the app/ folder. There you will find static HTML files, pure Javascript and CSS stylesheets.

Let us know if yo have any question
Thank you for your answer. That was actually the problem :)
On the documentation, exactly on Node and Gulp section, can you explain in another way this part?
Also, can you tell me if do I have to work on master folder instead on app folder? because, what I saw is that npm put all the files on app folder (js and css files).

Thank you for your answer.
That's right, npm is a tool that comes with nodejs used to install dependencies to build source files (compilation). You may want to learn first about JADE, LESS and GULP in order to understand well what's inside the master folder. Anyway, it's recommended to avoid such folder and the "Build" section of the documentation and start with files in the app/ folder.
Also, if you remove the master folder the app will work without problems because that folder is only necessary when you want to work with the source files.
Finally, we will take a look at the docs to improve the section you mention

Let us know if yo have any question

Thank you for reply.
Well, I do want to learn all those technologies. In case that I understand them, how do I compile the files from master folder to the app folder? I know that you recommend me that work with the source of app folder, but in the future, I would like to work with master folder too and compile the files in one single file like you did to create the source of app folder.

How do you create the app/js/app.js to one single file from master/js/*? That is exactly what I want to understand better. I think that is a wonderful way to work properly by file and not work with one single file..... when i have to add some controller and route I have to scroll too many to add the code, so I prefer work separately like you did in master folder. Do I explain myself ?
The file app.js is generated by concatenating all files in the master/js folder. That is done via the gulp command, which is a task manager that runs over nodejs. That means, the file gulpfile.js has customized task to generate (from master folder) the files that the theme finally serves to the client.
Also, the gulp command will compile LESS and JADE source files, which are language to write CSS and HTML (respectively) in a more simple way.
You can also learn more from their respective sites

By starting looking at the app/ folder is the simple way to get better idea of the theme files that are served to the client, once you've learned a bit about those files (html views, partials, AngularJs controller, directives, css classes, etc) you can move to the master/ folder and see how every component has its own file.

Hi, after download i opened it in visual studio then index page was seen with google chrome the window alert says "Failure loading Menu" please solve my problem
Here is a post from user @BE_BeeCee that will help you


i want to run template on codeigniter
Angle is an AngularJS frontend theme, where you can drop all your custom API request, and CodeIgniter is the backend that will listen and respond such API.
In case you won't use a restful api, you will need to convert all html to php files.

i know that but i want to control post and get data to page
Please take a look here http://www.amitavroy.com/justread/content/articles/single-page-app-angular-js-http-inside-code-igniter-using-twitter (but the better approach would be using $resource instead of $http)

Here's another full code example https://github.com/michalsn/CodeIgniter-AngularJS-App

i know that but i want to control post and get data to page
Same as above
redixint PURCHASED
I need to use the inputmask for an IP address. It does not work with the following because it forces every section of the IP address to be exact three digits.

masked="" data-inputmask="mask': '999.999.999.999'"

What will be the correct syntax to handle the inputmask for the IP address so that one/two digits can be handled?


This should work

data-inputmask="'mask': '9[99].9[99].9[99].9[99]'"

More information at https://github.com/RobinHerbots/jquery.inputmask

redixint PURCHASED
Thank you for your quick reply. Your suggestion partially works. Strangely, it works for the first three sections of the IP address, but not the last one. After the mask, it will allow an IP address like "". I will have to manually remove the "_" in the IP address to make it as a valid IP address.
You're right, seems like it doesn't play well when the mask is incomplete. Also tried with other solutions but still the extra underscore issue.
You can manually remove the "_" as you mentioned or you can try using an AngularJs native solution via 'ng-pattern' to validate the ip address using a regular expression.
Here is a fiddle http://jsfiddle.net/x0ebv1kd/2/

Let us know if you have any question
Hi, is there an issue with Google Map Modal? Only a portion of the map is displayed in the modal. Everything else appears to work. I've tried it on Chrome 39, IE9, FF24 with the same results. Thank you very much for an awesome app. Kind Regards
Hi, yes, it was an issue with modals. New version 1.6 solves the issue.

Thanks for report it
Are there any plans to have the sidebar open and close with animation?
Hi, more animations could be added via css transitions. Anyway, we don't use too many animations by default to not abuse of device performance.
If you want to add animations you can send us a message via our profile page and we'll give support.

I'm really interested to use this template to build my webapp, but I also want to use:
- Bower Package Manager to install packages and libraries (mainly charts libraries)
- Yeoman generator for AngularJS to generate controllers, directives, services, etc...
- Grunt Task Runner
Can I use these tools without problems?

- Bower has been included in the last update
- This item uses gulp to run task. Mostly for compilation of JADE, LESS and modular JS.
- Yeoman angular generator has a folder structure that doesn't match with the package. Is possible to make it work but it will require to rewrite paths (not tested yet).

One of the main advantages of the yo angular-generator is the ability to create controller, directives, etc from command line, so we would like to include soon a similar solution using the standard templates but using Gulp task.

Let us know if you have any question
I have two other questions:
1) it's possible to use the “Controller as” syntax? I'd like to use "this" instead of "$scope" in the controller and then, in the html, have something like:
<div ng-controller="MainCtrl as main"> {{ main.myVar }} </div>
2) what is the best way to remove a component or feature that I'm not going to use in my web application?
for example: I do not want to use Maps, so I would like to remove the item from the sidebar and all the things related to this functionality (view, controllers, libraries, etc ...); how can I do it?

p.s. : amazing template!

1) Yes, you can use it.
2) Start removing the menu entry in the file server/sidebar-menu.json.
- Remove controller, directives, etc associated with the module. For example
the Google Maps uses
- directive 'gmap'
- controller 'ModalGmapController'
- view maps-google
the Vector map uses
- controller VectorMapController
- directive 'vectorMap'
- view maps-vector

The simple way is via the files in the "master" folder, where all JS files are splitted. The other way is to edit the app.js and search the code. We think you'll fit better with the first option.
After remove the views you can also remove the unnecessary routes (states) in the App.config.

Let us know if you have any question
Great update rhythm. Your job is amazing.
Hey Zenith! We really thank your support and appreciation of our work.

More updates coming soon :)
the layout is very good, however I'm a hard time when I use Datatable in tables with data coming from a WebService, the paging scheme and filter only works if I have a DateTimePicker on ... this is correct? happens to somebody else?

Thank you very much!
Hi, we have released an update included a demo that loads datatable content from ajax (using json source files).
It seems to be working fine, but please let us know if you have any question

Hello themicon!

Thanks for including bower in the latest update! However, I'm having a hard time understanding how the base.js is getting build now. How I see the source folders listed in the gulpfile.js (in var vendorBaseScripts) for building the base.js got removed from the vendor folder. If I remove the base.js from the app/js, it seems I can't rebuild it by running gulp, although it still executes the task scripts:vendor:base.

Regardless of the above, would it be possible to implement the gulp task "scripts:vendor:base" that builds the base.js using the libraries installed by bower?

Hello simeon!

We have released an update that fix the base.js generation issue. We also made the gulpfile more stable including the following features
- Vendor paths for base.js are now listed in vendor.base.json (outside the gulpfile)
- Check file existences to detect wrong paths (by default gulp doesn't alert)
- Reorganization of vendor variables inside gulpfile for easy customization
- Vendor files (css and js) are compressed automatically before move them to the main vendor folder
- Improved task synchronization

Note: task 'scripts:vendor:bower ' was renamed to 'scripts:vendor:app' to avoid confusion. All dependencies comes from bower.

Sorry for the inconvenience and thanks for report the issue.

Please let us know if you have any question
Completely useless theme. I am not sure why someone would write 5000 page Javascript code in one single app.js file which actually renders the whole app. How am I supposed to modify it for my simple needs ?

I generally buy Wrapbootstrap themes because I am design handicapped, I dont need the bloated, poorly written code into my app. I just need HTML and CSS.

I am unable to modify this corpse of code for my need.

Did you read the documentation? It's online and covers everything in the theme. Files, configuration, folder structure, etc. We have put it online for users to know better what they are buying.
We don't write 5000 lines in one single file, we write everything most modular as possible. Have you checked the "master" folder? Have you really bought the theme? Because your comment contradicts what includes the package. Even we don't see the purchase tag. Maybe it's a mistake.

You can use one single file or separated files. You can even configure exactly what is required in your app to be loaded statically and dynamically.
If you don't want to work with the source files you can even move the splitted version of Javascript files to the application directory and work directly with a file per controller, directive, service, etc.

We try to cover all possible cases of use. We are constantly taking feedback from users and we have more features coming soon to improve our product. If you want to tell us about your case and how do you expect to work with this theme we can help you.

We will be waiting for your reply.

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:3 years ago
Updated:1 month 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