2474 comments

lizital PURCHASED
Hello,
When are you going to add angular variants section with side bar ans layout sections like in the jquery template?

Also what about the other samples available only in the jquery template?

Regards,
Hi,

Please stay tuned. We are working on it and will be released soon.

Regards.
Hello,

I'm missing the 'Horizontal Form' on Angular 4 version of the template, does it exist?

What combination of divs/classes should I use?

Thanks
Hi there,

You can use the grid method as shown in this example: https://v4-alpha.getbootstrap.com/components/forms/#using-the-grid

Regards.
Please, do the following test:

In the "Form components":
1. Click in the "Credit Card".
2. Hit "Tab" key.

Where did the focus go ? I know that it is in the "Basic Example - Single Select " field, but there is no glue for the user.

Can you fix this ?
I am having an error while trying to run angular 2

ng serve

error:
V
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
ERROR in ./src/app/shared/components/widgets/recent-signups/recent-signups.component.scss
Module build failed:
undefined
^
Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in F:\Template\Angular4 (cli)\app\node_modules\bootstrap\scss\_variables.scss (line 168, column 25)
Error:
undefined
^
Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in F:\Template\Angular4 (cli)\app\node_modules\bootstrap\scss\_variables.scss (line 168, column 25)
at options.error (F:\Template\Angular4 (cli)\app\node_modules\node-sass\lib\index.js:291:26)
@ ./src/app/shared/components/widgets/rec
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module build failed:
@import "../node_modules/bootstrap/scss/custom";
^
File to import not found or unreadable: ../node_modules/bootstrap/scss/custom.
Parent style sheet: /Users/wangshudong/item/template/Template/Angular4 (cli)/app/src/assets/scss/bootstrap-imports/_bootstrap-imports.scss
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/src/assets/scss/bootstrap-imports/_bootstrap-imports.scss (line 3, column 1)
Error:
@import "../node_modules/bootstrap/scss/custom";
^
File to import not found or unreadable: ../node_modules/bootstrap/scss/custom.
Parent style sheet: /Users/wangshudong/item/template/Template/Angular4 (cli)/app/src/assets/scss/bootstrap-imports/_bootstrap-imports.scss
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/src/assets/scss/bootstrap-imports/_bootstrap-imports.scss (line 3, column 1)
at options.error (/Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/node-sass/lib/index.js:291:26)
@ ./src/styles.scss 4:14-187
@ multi ./node_modules/material-design-iconic-font/dist/css/material-design-iconic-font.min.css ./node_modules/animate.css/animate.min.css ./node_modules/dropzone/dist/min/dropzone.min.css ./node_modules/nouislider/distribute/nouislider.min.css ./src/styles.scss
ERROR in ./src/app/layout/navigation/navigation.component.scss
Module build failed:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)
Error:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)
at options.error (/Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/node-sass/lib/index.js:291:26)
@ ./src/app/layout/navigation/navigation.component.ts 40:21-59
@ ./src/app/layout/layout.module.ts
@ ./src lazy
@ ./node_modules/@angular/core/@angular/core.es5.js
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
ERROR in ./src/app/layout/header/search/search.component.scss
Module build failed:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)
Error:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)
at options.error (/Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/node-sass/lib/index.js:291:26)
@ ./src/app/layout/header/search/search.component.ts 28:21-55
@ ./src/app/layout/layout.module.ts
@ ./src lazy
@ ./node_modules/@angular/core/@angular/core.es5.js
@ ./src/main.ts
@ multi webpack-dev-server/client?http://
Look at my post below, I hope it helps.
Hi,

I liked your work and I am planning to use your template for one of my projects.

However, I see that the pages in Angular 4 are very limited. As my project is in Angular 4, can you please give me a rough estimate by when can we expect more pages on it.. like the profile page, chat page, etc..

Thanks!
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module build failed:
@import "../node_modules/bootstrap/scss/custom";
^
File to import not found or unreadable: ../node_modules/bootstrap/scss/custom.
Parent style sheet: /Users/wangshudong/item/template/Template/Angular4 (cli)/app/src/assets/scss/bootstrap-imports/_bootstrap-imports.scss
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/src/assets/scss/bootstrap-imports/_bootstrap-imports.scss (line 3, column 1)
Error:
@import "../node_modules/bootstrap/scss/custom";
^
File to import not found or unreadable: ../node_modules/bootstrap/scss/custom.
Parent style sheet: /Users/wangshudong/item/template/Template/Angular4 (cli)/app/src/assets/scss/bootstrap-imports/_bootstrap-imports.scss
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/src/assets/scss/bootstrap-imports/_bootstrap-imports.scss (line 3, column 1)
at options.error (/Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/node-sass/lib/index.js:291:26)
@ ./src/styles.scss 4:14-187
@ multi ./node_modules/material-design-iconic-font/dist/css/material-design-iconic-font.min.css ./node_modules/animate.css/animate.min.css ./node_modules/dropzone/dist/min/dropzone.min.css ./node_modules/nouislider/distribute/nouislider.min.css ./src/styles.scss
ERROR in ./src/app/layout/navigation/navigation.component.scss
Module build failed:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)
Error:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)
at options.error (/Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/node-sass/lib/index.js:291:26)
@ ./src/app/layout/navigation/navigation.component.ts 40:21-59
@ ./src/app/layout/layout.module.ts
@ ./src lazy
@ ./node_modules/@angular/core/@angular/core.es5.js
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
ERROR in ./src/app/layout/header/search/search.component.scss
Module build failed:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)
Error:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)
at options.error (/Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/node-sass/lib/index.js:291:26)
@ ./src/app/layout/header/search/search.component.ts 28:21-55
@ ./src/app/layout/layout.module.ts
@ ./src lazy
@ ./node_modules/@angular/core/@angular/core.es5.js
@ ./src/main.ts
@ multi webpack-dev-server/client?http://
amang PURCHASED
+1 same here
when ng serve

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module build failed:
@import "../node_modules/bootstrap/scss/custom";
^
File to import not found or unreadable: ../node_modules/bootstrap/scss/custom.
Parent style sheet: /Users/wangshudong/item/template/Template/Angular4 (cli)/app/src/assets/scss/bootstrap-imports/_bootstrap-imports.scss
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/src/assets/scss/bootstrap-imports/_bootstrap-imports.scss (line 3, column 1)
Error:
@import "../node_modules/bootstrap/scss/custom";
^
File to import not found or unreadable: ../node_modules/bootstrap/scss/custom.
Parent style sheet: /Users/wangshudong/item/template/Template/Angular4 (cli)/app/src/assets/scss/bootstrap-imports/_bootstrap-imports.scss
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/src/assets/scss/bootstrap-imports/_bootstrap-imports.scss (line 3, column 1)
at options.error (/Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/node-sass/lib/index.js:291:26)
@ ./src/styles.scss 4:14-187
@ multi ./node_modules/material-design-iconic-font/dist/css/material-design-iconic-font.min.css ./node_modules/animate.css/animate.min.css ./node_modules/dropzone/dist/min/dropzone.min.css ./node_modules/nouislider/distribute/nouislider.min.css ./src/styles.scss
ERROR in ./src/app/layout/navigation/navigation.component.scss
Module build failed:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)
Error:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)
at options.error (/Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/node-sass/lib/index.js:291:26)
@ ./src/app/layout/navigation/navigation.component.ts 40:21-59
@ ./src/app/layout/layout.module.ts
@ ./src lazy
@ ./node_modules/@angular/core/@angular/core.es5.js
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
ERROR in ./src/app/layout/header/search/search.component.scss
Module build failed:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)
Error:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)
at options.error (/Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/node-sass/lib/index.js:291:26)
@ ./src/app/layout/header/search/search.component.ts 28:21-55
@ ./src/app/layout/layout.module.ts
@ ./src lazy
@ ./node_modules/@angular/core/@angular/core.es5.js
@ ./src/main.ts
@ multi webpack-dev-server/client?http://
Look at my post below, I hope it helps.
Greetings from Colombia, I am thinking of buying your template, but I want to know without having seed projects or some kind of guide to use your planti8lla.

Thank you
As many of them complained above, the Angular4 version is not working - ng serve gives multiple errors in the console...Could you please advise asap. Thanks for the great product.

ERROR in ./src/app/layout/navigation/navigation.component.scss
Module build failed:
undefined
^
Argument `$color` of `darken($color, $amount)` must be a color
Look at my post below, I hope it helps.
Hello,
it would be great to implement:
* Bootstrap 4.0.beta
* Add to .btn--icon .btn-sm .btn-lg and else
* VueJS supporting (I can help with that)

Thanks.
Any news about the mistakes of angular 4 ?, I need with some urgency.
I'm having the same problems as everyone else with this templates (i.e. Argument `$color` of `darken($color, $amount)` must be a color). Can anyone figure it out?
In AngularJs Bootstrap 3 (1.5.2) datepicker does not work correctly. When you click a month or a year the popup windows closes, but it should not. In original ui-bootstrap it works OK.
Nice work.

Any plans to upgrade to use bootstrap 4 beta?
Attenting!! Be careful bying this theme, it's not supported by the author any longer.
Great theme, but one flaw that's making it extremely difficult to modify. Can you add the unminified version of app.js to the jquery version. I tried running app.min.js through an online unminifier but it's still difficult to read.
I'm having the same problem as mentioned by others.

Appearently some lib is breaking it all, because some weeks ago it was working fine...

Waiting for a solution from the theme author...

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module build failed:
@import "../node_modules/bootstrap/scss/custom";
Kimmeng PURCHASED
I just purchased that project. when I run on Angular 4

I got an error
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module build failed:
@import "../node_modules/bootstrap/scss/custom";
^
File to import not found or unreadable: ../node_modules/bootstrap/scss/custom.
Parent style sheet: /Users/wangshudong/item/template/Template/Angular4 (cli)/app/src/assets/scss/bootstrap-imports/_bootstrap-imports.scss
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/src/assets/scss/bootstrap-imports/_bootstrap-imports.scss (line 3, column 1)
Error:
@import "../node_modules/bootstrap/scss/custom";
^
File to import not found or unreadable: ../node_modules/bootstrap/scss/custom.
Parent style sheet: /Users/wangshudong/item/template/Template/Angular4 (cli)/app/src/assets/scss/bootstrap-imports/_bootstrap-imports.scss
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/src/assets/scss/bootstrap-imports/_bootstrap-imports.scss (line 3, column 1)
at options.error (/Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/node-sass/lib/index.js:291:26)
@ ./src/styles.scss 4:14-187
@ multi ./node_modules/material-design-iconic-font/dist/css/material-design-iconic-font.min.css ./node_modules/animate.css/animate.min.css ./node_modules/dropzone/dist/min/dropzone.min.css ./node_modules/nouislider/distribute/nouislider.min.css ./src/styles.scss
ERROR in ./src/app/layout/navigation/navigation.component.scss
Module build failed:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)
Error:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)
at options.error (/Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/node-sass/lib/index.js:291:26)
@ ./src/app/layout/navigation/navigation.component.ts 40:21-59
@ ./src/app/layout/layout.module.ts
@ ./src lazy
@ ./node_modules/@angular/core/@angular/core.es5.js
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
ERROR in ./src/app/layout/header/search/search.component.scss
Module build failed:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)
Error:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color

Backtrace:
node_modules/bootstrap/scss/_variables.scss:168, in function `darken`
node_modules/bootstrap/scss/_variables.scss:168
in /Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/bootstrap/scss/_variables.scss (line 168, column 25)
at options.error (/Users/wangshudong/item/template/Template/Angular4 (cli)/app/node_modules/node-sass/lib/index.js:291:26)
@ ./src/app/layout/header/search/search.component.ts 28:21-55
@ ./src/app/layout/layout.module.ts
@ ./src lazy
@ ./node_modules/@angular/core/@angular/core.es5.js
@ ./src/main.ts
@ multi webpack-dev-server/client?http://

Could you tell me how to solve that problem?
Look at my post below, I hope it helps.
Kimmeng PURCHASED
@fabiomagagnin really thank for you help now It work :)
For those who are facing the problem below:

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module build failed:
@import "../node_modules/bootstrap/scss/custom";

The problem is the latest bootstrap release (v4.0.0-beta), it was released 11 days ago!

Solution: go to package.json and change:

"bootstrap": "^4.0.0-alpha.6"

to

"bootstrap": "4.0.0-alpha.6"

Remove the ^

It makes npm download the exact version.

I hope it helps, while the author comes with the definitive solution...
thank you for this!!!
Kimmeng PURCHASED
Hello everyone, I just try with the select2 on Modal Popup but it seem doesn't support the style anymore. do you have any idea to fix that problems? thanks, Kimmeng

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

$24
8871Purchases

Licenses: Details »

Single application $24
Version:2.0.2
Type:
  • HTML Template
Bootstrap: Compatible with 4.x
Layouts:
  • Responsive
  • Fluid
  • Fixed-width
Browsers:
  • IE 10, 11
  • Latest Chrome
  • Latest Edge
  • Latest Firefox
  • Latest Safari
Uses Less:Yes
Uses Sass:Yes
Categories:
Tags: admin template, dashboard, lightweight admin, material, material admin, material design, responsive admin, responsive dashboard
Item#:WB011H985
Released:2 years ago
Updated:2 months ago
Sold exclusively on WrapBootstrap
rushenn

rushenn

Signed up 5 years ago

Need a front-end theme?

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 9/10/11
  • Latest Opera

Features & includes

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