How to use bootstrap 4 in angular 2?

Bootstrap4 alpha for Angular2 CLI (also works for Angular4 CLI)

If you are using the angular2 cli/angular 4 cli do following:

npm i bootstrap@next --save

This will add bootstrap 4 to your project.

Next go to your src/style.scss or src/style.css file and import bootstrap there:

For style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

For style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

If you are usinga scss, make sure you change your default styling to scss in .angular-cli.json:

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

Bootstrap JS Components

For Bootstrap JS components to work you will still need to import bootstrap.js into .angular-cli.json under scripts (this should happen automatically):

...     
"scripts": ["../node_modules/jquery/dist/jquery.js",
                  "../node_modules/tether/dist/js/tether.js",
                  "../node_modules/bootstrap/dist/js/bootstrap.js"],
...

Update 2017/09/13: Boostrap 4 Beta is now using popper.js instead of tether.js. So depending on which version you are using import either tether.js (alpha) or popper.js (beta) in your scripts. Thanks for the heads up @MinorThreat

Related Posts:

  1. Difference between Constructor and ngOnInit
  2. Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’
  3. Unable to resolve dependency tree error when installing npm packages
  4. npm WARN … requires a peer of … but none is installed. You must install peer dependencies yourself
  5. document.getElementById replacement in angular4 / typescript?
  6. TS1086: An accessor cannot be declared in ambient context
  7. Angular2 Error: There is no directive with “exportAs” set to “ngForm”
  8. ‘router-outlet’ is not a known element
  9. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  10. No provider for HttpClient
  11. How to implement sleep function in TypeScript?
  12. Implement session storage in an Angular 8 application
  13. Can’t bind to ‘routerLink’ since it isn’t a known property
  14. Module has no exported member error in angular module
  15. How do I install Angular 2 using NPM?
  16. How to apply filters to *ngFor?
  17. Select default option value from typescript angular 6
  18. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  19. Could not find module “@angular-devkit/build-angular”
  20. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  21. AngularJS vs Angular [closed]
  22. When to use ‘npm start’ and when to use ‘ng serve’?
  23. ExpressionChangedAfterItHasBeenCheckedError Explained
  24. Angular 10 – can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’
  25. How to use *ngIf else?
  26. ngFor with index as value in attribute
  27. How to upgrade Angular CLI to the latest version
  28. What is pipe for in RxJS?
  29. Angular: Get current index in ngFor
  30. What is .subscribe in Angular?
  31. BehaviorSubject vs Observable?
  32. ERR_INVALID_HTTP_RESPONSE using Angular 7 and ASP.Net Core 2.2 in Google Chrome browser
  33. Failed to load resource: net::ERR_CONNECTION_REFUSED : Nodejs
  34. Angular: mat-form-field must contain a MatFormFieldControl
  35. (change) vs (ngModelChange) in angular
  36. What is the difference between Promises and Observables?
  37. mat-form-field must contain a MatFormFieldControl
  38. Angular File Upload
  39. formSelect() method in materialize does’nt work in angular 6 inputs
  40. ERROR Error: No value accessor for form control with unspecified name attribute on switch
  41. form control error:ERROR Error: No value accessor for form control with unspecified name attribute
  42. “You seem to not be depending on “@angular/core”.”
  43. You seem to not be depending on “@angular/core” and/or “rxjs”. This is an error
  44. Angular ForEach in Angular4/Typescript?
  45. ‘ng’ is not recognized as an internal or external command, operable program or batch file
  46. Kendo Angular Chart change legend position based on size
  47. Angular4 – No value accessor for form control
  48. What does an “&” before a pseudo element in CSS mean?
  49. Why do i need `typings.json` file in an Angular 2 project?
  50. node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ‘;’ expected error after installation of Angular 6
  51. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  52. Unexpected value ‘undefined’ declared by the module ‘AppModule’
  53. I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular
  54. Where to place/find the systemjs.config.js file in an angularJS2 project?
  55. ng serve does not work
  56. What is the equivalent of ngShow and ngHide in Angular 2+?
  57. how to refresh page in angular 2
  58. What is ViewChild in Angular2?
  59. Repository is not clean. Please commit or stash any changes before updating In Angular 8
  60. Property ‘map’ does not exist on type ‘Observable‘
  61. Angular 2 Cannot read property ‘config’ of null
  62. Set focus on element
  63. Cleanest way to reset forms
  64. Angular2 CLI error “@angular/compiler-cli” package was not properly installed
  65. Angular2 – How to create a simple table
  66. Angular material Could not find Angular Material core theme
  67. Angular EXCEPTION: No provider for Http
  68. Error : Cannot find primary outlet to load
  69. cannot find module ‘@angular/http’?
  70. Templating with href in angular (4)
  71. Angular 2 : No NgModule metadata found
  72. How to update TypeScript to latest version with npm?
  73. Angular 2 Checkbox Two Way Data Binding
  74. File Upload In Angular?
  75. is there any alternative for ng-disabled in angular2?
  76. Angular 2.0 and Modal Dialog
  77. Cannot find module ‘@angular/compiler’
  78. Angular 2 [hidden] does not seem to be working?
  79. Local workspace file (‘angular.json’) could not be found. But same code works in another computer
  80. You have to be inside an angular-cli project in order to use the serve command
  81. Angular 4 setTimeout() with variable delay and wait
  82. Angular4 core.es5.js Uncaught reflect-metadata shim is required when using class decorators
  83. Angular error: Please add a @NgModule annotation
  84. Getting No provider for NgControl Error after adding ReactiveFormsModule to my angular 4 app
  85. How to use `trackBy` with `ngFor`
  86. Why do i need `typings.json` file in an Angular 2 project?
  87. Angular routerLink does not navigate to the corresponding component
  88. How to use jQuery with Angular?
  89. ‘tsc command not found’ in compiling typescript
  90. How do I download a file with Angular2 or greater
  91. Angular2 – Http POST request parameters
  92. Angular 2 Sort table columns
  93. GET http://localhost:4200/null 404 (Not Found) in angular2 with angular-cli
  94. Angular design pattern: MVC, MVVM or MV*?
  95. Check if Variable is Empty – Angular 2
  96. Angular 2 multiple modules
  97. Electron – Not allowed to load local resource
  98. angular-cli where is webpack.config.js file – new angular6 does not support ng eject
  99. Using/compiling Foundation SASS on live WordPress server
  100. How to style bootstrap container in wordpress theme?

Leave a Comment