Skip to main content

Install Vanilla Bootstrap-4 in angular

From the root of your project, run in your terminal:

npm install bootstrap@4.0.0-beta.2 --save
2. And you need to install it's dependencies (jQuery) and (Popper):
npm install jquery@1.9.1 --save
npm install popper.js@^1.12.3 --save
If you want to use SASS rather than CSS use:
npm install bootstrap@4.0.0-beta.2 --save --style=sass
Or if you want to only install for development purposes, just append --save-dev.
npm install bootstrap@4.0.0-beta.2 --save-dev, and make sure you do the same with jQuery and Popper.
3. Open up your angular-cli.json file and add the style and scripts:
"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/jquery.min.js",
        "../node_modules/popper.js/dist/umd/popper.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],
If you're using SASS use this config:
"styles": [
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/jquery/jquery.min.js",
        "../node_modules/popper.js/dist/umd/popper.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],
And with SASS you need to make one last step. Place the line below in your styles.scss file (imports bootstrap)
@import "../node_modules/bootstrap/scss/bootstrap"
4. Restart your server and you should be ready to code!

Extra Sass file configuration:

Create directory in: src/styles
Create files and place in that directory: _variables.scss, _custom.scss
Change: .angular-cli.json
"styles": [
        "styles/styles.sass"
      ],
Import files into: styles.scss
@import "../../node_modules/bootstrap/scss/bootstrap"
@import "variables"
@import "custom"

http://colinstodd.com/blog/post/how-to-install-bootstrap-4-beta-in-angular-4-as-a-dependency

Comments

Post a Comment

Popular posts from this blog

Flash Tool Error Codes -MTK Chipset

Complete List of SP Flash Tool Error Codes and their Meanings and Solutions MTK Chipset. . How to Fix SP Flash Tool Errors (BROM Error Codes): SP Flash Tool Failed to enumerate COM Port This error clearly means that the Flash Tool has issues finding the COM port on which your device is connected. Solution: Connect your watch to other Port and make sure you have USB Drivers installed. Open “Device Manager” and find the COM Port of the device you connected. Once found, open Flash Tool, click on Options -> COM Port -> Select the COM Port on which you have connected your device. Device automatically disconnects during flashing Meaning: Device disconnects as soon as the flashing process begins, interrupting the process. Solution: Try a different USB Cord, USB Port & PC Hold the Volume down or up button while connecting the device to PC for flashing SP Flash Tool remains at 0% Solution: Install necessary MediaTek VCOM drivers on PC. Use the latest version of S...
Post a Comment
Selanjutnya »

Reseting Angular Package

Updating Angular CLI If you're using Angular CLI  1.0.0-beta.28  or less, you need to uninstall  angular-cli  package. It should be done due to changing of package's name and scope from  angular-cli  to  @angular/cli : npm uninstall -g angular-cli npm uninstall --save-dev angular-cli To update Angular CLI to a new version, you must update both the global package and your project's local package. Global package: npm uninstall -g @angular/cli npm cache clean # if npm version is > 5 then use `npm cache verify` to avoid errors (or to avoid using --force) npm install -g @angular/cli@latest Local project package: rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell npm install --save-dev @angular/cli@latest npm install Sources: https://github.com/angular/angular-cli#updating-angular-cli
Post a Comment
Selanjutnya »