enquiren PURCHASED
One feature request for future purchases: I'm a SASS shop, so I'm going to convert your LESS to it, but it would be nice timesaver to have SASS already included (or if you just kill LESS altogether since Bootstrap is doing the same in v4).
I've in plans to add SASS support, it wasn't my original intention but since BS4 stated that is been built on SASS I took care of this necessity.
I hope to include it soon in the next update, thanks for sharing this!
Hi, Thank you for your product.
I use Python/Djnago . As far as I know, your product support in Node.js.
How can I apply to your product in Django?
Hi, this product support nodejs because of the tool "Gulp" but only to compile the frontend files like jade less, etc..
Djnago is a backend frameworks and so it's not supported "as is". I've tried django before but there's a version using only jquery (non angular) which is more simple to integrate with any other framework.
Where can I change the pageTitle and stuff? I changed it in the settings.service.js file but it always overwrites it...Also, if I change the app.footer.hidden to true, nothing happens.
The pageTitle is generated with a function located in file "core.controller.js"
In "settings.controller.js" you will see a call to function "loadAndWatch", this function watch and saves the settings to the local storage and reloads them when the site first loads, if you change something in the settings, those the changes will be overwritten.
If you don't want this behavior, comment the loadAndWatch invocation and also erase your localstorage.
Hi, one question, how I can reuse your controllers from another controllers?
I'm creating my own controllers, but in one case, I'm trying to reuse the SweetAlert Controller, but I can.. I tried using emit/broadcast and on.

Is it possible to have the same behavior in a service/factory? Do you have an eample? I'll have the same issues in all the other controllers due to a page will be a mixed of those base controllers.
Hi, using controllers from another is not possible won't so easy, I mean there's no api approach in the code so you can reuse the instance of another controller. I recommend you to reuse the examples in your custom controllers, that will be give a better control of the behavior.
I don't have examples for a SweetAlert service, but the usage of the module is pretty as you can see in the demo, something like this
vm.demo1 = function() {
SweetAlert.swal("Here's a message");
fastesol PURCHASED
Hi, thanks for the awesome product.
Just one problem: Modal Popups are not closable properly.(Transparent black background will remain there after closing the popup)
"X" button at the top right corner is not working at all.
Hi, thanks for let me know that. To solve this issue quickly please upgrade angular-bootstrap to its latest version (0.14.2)
I'll add this changes for the next update.

fastesol PURCHASED
Great! modal is now closable. but, X button still not working.
Hi, sorry for not clarify, the X button doesn't have any action associated, it could have an ng-click="close()" like the cancel button.
fastesol PURCHASED
All the issues gone. but there are lots of Warnings in console (came after I upgrade angular-bootstrap to its latest version - 0.14.2).
popover-popup is now deprecated. Use uib-popover-popup instead.
$tooltip is now deprecated. Use $uibTooltip instead.
Hi, yes all messages are deprecation warning because many things changed in the latest release of uiBootstrap. I'm working on adding the necessary fixes to remove the messages for next update
Why don't we have any tutorial for this. Yah!1 there is a documentation but it should be more elaborative. I reallt need tutorial.
Hello, I don't have a tutorial for this, I will work a more on the docs for the next update but knowing about angular - bootstrap - jquery is the necessary to work with this template (angular is optional), then each feature uses a plugin that has its respective documentation.
In sidebar , you adding template from $templateCache.put("templates/sidebar.html",<yout template code >)

also there is a file named sidebar.html. Editing code there but its not reflecting there. How these things are connected ?
Hi, $templateCache.put is used by angular to cache html markup and when the app is loaded all pages are ready and it does not need to be requested to the server. If you are using templateCache the markup is in the file templates.js.
If you want to edit sidebar.html please remove the script entry in the index file for templates.js and angular will request the real file instead of using the cache version
I tried to remove the <script src="app/js/templates.js"></script> in index.html. The whole sidebar and other templates in cached folder are not able to load.

I using Visual Studio to open the source code and run it without install npm, is that ok?

Please help.
Hello @vinsee, the VS version doesn't require npm or any build tool based on node.
The template.js is generated when you run the project gulp and includes all files that are cached, meaning, once the template.js is served angular has access to all templates without need to request to the server.

espratik PURCHASED
hi i have developed php application using naut theme in html5 version but page load performance is very weak please tell me how can i improve page load speed performance.
Hi, Page performance is associated with many factors, and hard to determine but I can tell that the basic way to do that is by isolating components. As you can see in demo, views with charts are not so fluid like a single page with a few boxes and text.
If you are using gulp, I've included a task to generate a report with Plato. (https://github.com/es-analysis/plato) this could help you to determine the complexity of your code and focus on certain parts to optimize.
lukasw44 PURCHASED
When you plan release new version ?
Currently next is delayed. Are you waiting for any particular feature?
lukasw44 PURCHASED
I am waiting for sass ...
I want to say very nice work. I already learn a lot from your template. But i have a bit trouble adding custom css. I modifyed the sidebar if so there could be 2 link in the li element. but i have some trouble with the active state. I have been searching for 2 day but i keep missing something. I already made a post about it on stackoverflow: http://stackoverflow.com/questions/33495945/how-to-set-the-hover-state-equals-the-active-state-with-li-clearfix-element-usin but no response yet. If you could take a look it would greatly appreciated.
Hello, by any chance could you provide an online demo, it will make it quick to check for me.
Anyway based on your post, it could be possible that the solution looks like this, just an example to show the idea

,bg-white .nav > li:hover > a {
// normal hover styles, when an element is normal (not active)

,bg-white .nav > li.active,
,bg-white .nav > li.active:hover {
// active styles, when ui-sref-active activates the element
// note that the part "li.active:hover" will override the above li:hover (it has more specificity)
// making the .active and .active->hover look the same.
Out of curiosity, I just bought the theme and I am amazed with the ammount of content. How long does it take you to make a theme like this?
Hi, it took me around 3-4 months full-time. I been working on templates like this since a couple of years so the time also depends on the amount of knowledge of features included.
Thanks for ask
There is a problem happening with me, but I couldn't replicate it on the Live demo.

What I did: Extracted the compressed file, then I opened up the "angularjs" folder in Chrome. - I'm using Linux, never am sure if that makes any difference.

Ok, so the problem is: When I go to "Components / Notifications" and launch any of the modals on the "Modals" section, it opens up ok... but when I click "cancel" or "ok" the grayish transparent background won't go away and I have to refresh the page to fix it. (.modal-backdrop is the class of the div that won't go away).

On the developer tools it doesn't show any errors, but when the page loads for the first time I get two notifications regarding "tooltip-html-unsafe is now deprecated..." and "pascalprecht.translate.$translateSanitization: No sanitization strategy has been configured."

Do you guys know why this happens?
Hi, this is related with the version of angular uiBootstrap included, to solve this issue quickly please upgrade angular-bootstrap to its latest version (0.14.3)
I'm delayed but working to add this changes for the next update. After add this update you will see also warnings about deprecated attribute names, this is because angular-ui team changed the name of many attributes but this fix will be also included in the next update. Basically, all directives names changed its name to be prefixed with "uib-" (for example, uib-dropdown)
H geedmo! Just wondering what the logic behind having 'bootstrap-reset.less' and 'bootstrap-variables.less' is? Why override the compiled Bootstrap CSS rather than customise the Bootstrap build? Even though there's 'bootstrap-variables.less' I'm unable to directly influence Bootstrap's styles.

Would it not make sense, for instance, to have a copy of Bootstrap's 'bootstrap.less', 'variables.less' and 'theme.less' in the app and have style.less compile all the Bootstrap components (or only what's actually required by the project/theme) as well using those customised files? This way Bootstrap is fully customisable and both it and the app use the same variables, mixins, etc.

I'm planning to implement the above, but first wanted to see if I'm missing something and there's already a (recommended) way of achieving the same level of flexibility/customisability in the theme's architecture.
Hi, I try to focus on flexibility. Bootstrap source files are there in order to improve assets, mainly for those project where size is critical. But, at the same time, I didn't do many changes directly to bootstrap source because that makes hard to update new versions, that why I've added a 'bootstrap-reset.less' and 'bootstrap-variables.less'. If you check bootstrap.less you will find that standard variables are overridden with the 'bootstrap-variables.less', that's why touching variables.less doesn't make changes.
Also, the trick behind compiling bootstrap styles separated from the app styles is to avoid any issue with some browsers (e.g. ie9) that have a limit in the amount of selectors per stylesheet.

If you need to change something internal of bootstrap, do it in bootstrap-reset or in the framework source files directly. If you need to change something of the template, do with in styles.less and any other file imported.
Another technique, (if size is not critical in your app) is to @import your custom stylesheets at the end of styles.less and add all the styles necessary to override bootstrap and the template styles, in this way you will have your code independent and will make easy to debug or changes things in the future.

Hope this helps,
Thanks @geedmo. Your second suggestion is pretty much in line with my proposed method. Essentially copying bootstrap.less into styles.less (or @import the customised copy of it) and compile bootstrap using bootstrap-variables.less instead of variables.less. I'm certainly not talking about touching any of the actual Bootstrap files, only copies of them. Those three files are intended to be customised per project.

As for selector per stylesheet IE issue; yes, I've ran into this problem in the past with an old, bloated framework, but using http://blesscss.com/ took care of it. Anyway, really appreciate the feedback, and great work on the theme!
fastesol PURCHASED
Hi there!
Is there a way to show text (instead of parsed number) for the chart tool-tip? currently, if I change the array in the following file "/src/js/modules/home/home.controler.js" to somthing like

vm.lineChartData = [{
"label": "Serie XXXXX",
"color": "#21dab1",
"data": [
["10, Nov", "0"],
["12, Nov", "0"],
["14, Nov", "10"],
["16, Nov", "5"],
["18, Nov", "8"],
["20, Nov", "8"],
["22, Nov", "5"],
["24, Nov", "0"],
["26, Nov", "9"],
["28, Nov", "1"],
["30, Nov", "2"],
["02, Dec", "0"],
["04, Dec", "2"],
["06, Dec", "2"],
["08, Dec", "2"]

it converts the string on each zero index to NaN. actually, I couldn't where is the code that parsing the string to int and creating the issue. or is there a way do disable that parse from config file?

Hi, first of all, the package doesn't contains a file named "/src/js/modules/home/home.controler.js", I guess it was created by you right?
Flot charts allows to use a function to format tooltips, you can use it in order to change the way the values are parse

Something like this
tooltipOpts: {
content: function(label, xval, yval) {
var content = "%s %x " + yval;
return content;
Another example here http://stackoverflow.com/a/18190027

In file src\js\modules\charts\flot-chart-options.services.js you can find common options used for flot charts grouped by type of chart
Since version 1.3 there is an issue with the time picker layout, the text is cut off. It shows on the live preview here as well as the development version, in both Safari and Firefox.

I also have an issue with the sidebar where the icons get cut off.
Apologies for the delayed answer, do you have a screenshot? I'm not seeing issues with icons or datepicker. It happens only on mac? Thanks
Great theme had to purchase. Did you or anyone try the jquery version with laravel?
I haven't, but I've been playing a bit with laravel and seems that you can install the theme in the resources/views/ folder (and renaming html to php), then other assets can be in the public folder (css/js/vendors).
The current build system with gulp won't work at all since it's based on a "strictly" defined structure, you will have to use only the files (html/css/js) that are located into the dist/ folder which are raw files without the need to be compiled.
I don't know to much about laravel, but if you have any question regarding to the template please let me know.
It works well. Just one (backend dev lol). how to change the menu toggle button to give the "$("body").addClass('aside-mini'); version rather than full dissapear?
Edit the file /app/scripts/modules/layout/ui-sidebar.js (your paths may be different in laravel.)
around line 38 remove the class .sidebar-toggle-off

And add/create a new click event for such element

$('.sidebar-toggle-off').on('click', function(e){
OK cheer will try. What if I want to add a new colour scheme for the nav bar buttons and side menu.... I try copy and create one but never quite comes off .... cheers
Theme are base on class names that provides colors to sub components, if you want to configure new schemed, edit file angularjs/src/js/modules/settings/settings.service.js and look for "self.themes" array, there you can change the colors allowed by changing bg-* classnames
Default colors supported are listed in this page
No entiendo para que sirve la licencia en estas plantillas, quisiera que me explicaran para que sirve y como funciona al momento de yo subir la aplicaciĆ³n web a un hosting
Hola, la licencia se utiliza como permiso de uso del codigo. Dependiendo del uso final que desees darle, corresponde una licencia. Por ejemplo, la Single es para un solo proyecto un solo cliente. La extendida corresponderia al caso donde desees usar el template para create uno nuevo y revender.
Hi, geedmo.
How can I reload page at dataTables.
when reload page(eg. press F5 key) it show only page setting button.
Hi, I don't see any issue while reloading pages. If you open the devtools (f12) and reload the page do you see any error in console? Also, do you see the same problem using anonymous mode or disabling some browser addons?
I love the template, but there are way too many moving parts. I really wish it was more moduler have you guys considered putting out a version following John Papa's Style Guide? Knowing where things are would make using the template 10 times better. I have spent hours trying to really organize elements...and yeah I can take the template the way it is...but I really want to understand where all the pieces are located and be able to customize it. I would pay extra just to get a starting copy that had some of John Papa's moduler style, please let me know if that is possible?
Hell, all you files you need to customize the angular project are placed under the "src" folder, there are js, jade and less/scss files, with gulp you can build all this file into the app folder.
Regarding to John Papa's Style Guide, I've follow it close as possible, mainly spliting the app into js modules which is own module, directives, controllers, etc declaration.
I'm not doing customization but can help you with support related to the template.
Thanks and apologize for the delayed answer.
mkranjan PURCHASED
1. date time picket is not responsive, it does not resize in 4 or 5 inch screen
2. list is also not moving from right side of viewport, it is going outside the view

can you please help me out these issues...Is there any way to send you screenshot or mail you the detail if you need...
Hi, please send me a message via my profile here https://wrapbootstrap.com/user/geedmo#contact
If you have screenshots I will appreciate that to understand better the issue

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 $18
  • HTML Template
Bootstrap: Compatible with 3.3.x
  • Responsive
  • Fluid
  • Fixed-width
  • IE 9, 10, 11
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
Uses Less:Yes
Uses Sass:No
Labels: admin, angularjs, bootstrap, dashboard, gulp, html5, jade, less, material
Released:3 years ago
Updated:3 years ago
Sold exclusively on WrapBootstrap


Signed up 5 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