How to add bootstrap in angular 6 project

Question

app.component.html

index.html

app.component.ts

I have tried to add styles dependency in angular.json package but showing that the module not found. adding two of the bootstrap files. here is the screenshot of both the files

the angular.json file is like this angular.json file

User · Answer

using command   npm install bootstrap --save   open  angular json  old   angular-cli json   file find the  styles  add the bootstrap css file   styles             src styles scss           node modules bootstrap dist css bootstrap min css

User · Answer

npm install bootstrap --save   and add relevent files into angular json file under the style property for css files and under scripts for JS files     styles           node modules bootstrap dist css bootstrap min css

User · Answer

For Angular Version 11  Configuration The styles and scripts options in your angular json configuration now allow to reference a package directly  before   quot styles quot     quot    node modules bootstrap dist css bootstrap css quot   after   quot styles quot     quot bootstrap dist css bootstrap css quot              quot builder quot    quot  angular-devkit build-angular browser quot              quot options quot                  quot outputPath quot    quot dist ng6 quot                quot index quot    quot src index html quot                quot main quot    quot src main ts quot                quot polyfills quot    quot src polyfills ts quot                quot tsConfig quot    quot src tsconfig app json quot                quot assets quot                    quot src favicon ico quot                  quot src assets quot                              quot styles quot                    quot src styles css quot   quot bootstrap dist css bootstrap min css quot                               quot scripts quot                             quot jquery dist jquery min js quot                           quot bootstrap dist js bootstrap min js quot                                          Angular Version 10 and below  You are using Angular v6 not 2  Angular v6 Onwards  CLI projects in angular 6 onwards will be using  angular json instead of  angular-cli json for build and project configuration  Each CLI workspace has projects  each project has targets  and each target can have configurations Docs        quot projects quot          quot my-project-name quot            quot projectType quot    quot application quot          quot architect quot              quot build quot                quot configurations quot                  quot production quot                    quot demo quot                    quot staging quot                                       quot serve quot                quot extract-i18n quot                quot test quot                           quot my-project-name-e2e quot              OPTION-1 execute npm install bootstrap 4 jquery --save The JavaScript parts of Bootstrap are dependent on jQuery  So you need the jQuery JavaScript library file too   In your angular json  add the file paths  to the styles and scripts array in under build target NOTE  Before v6 the Angular CLI project configuration was stored in  lt PATH TO PROJECT gt   angular-cli json  As of v6 the location of the file changed to angular json  Since there is no longer a leading dot  the file is no longer hidden by default and is on the same level  which also means that file paths in angular json should not contain leading dots and slash  i e you can provide an absolute path instead of a relative path  In  angular-cli json file Path was  quot    node modules  quot  In angular json it is  quot node modules  quot    quot build quot                quot builder quot    quot  angular-devkit build-angular browser quot              quot options quot                  quot outputPath quot    quot dist ng6 quot                quot index quot    quot src index html quot                quot main quot    quot src main ts quot                quot polyfills quot    quot src polyfills ts quot                quot tsConfig quot    quot src tsconfig app json quot                quot assets quot                    quot src favicon ico quot                  quot src assets quot                              quot styles quot                    quot src styles css quot   quot node modules bootstrap dist css bootstrap min css quot                                              quot scripts quot     quot node modules jquery dist jquery min js quot                           quot node modules bootstrap dist js bootstrap min js quot                 OPTION 2  Add files from CDN  Content Delivery Network  to your project CDN LINK Open file src index html and insert the  lt link gt  element at the end of the head section to include the Bootstrap CSS file a  lt script gt  element to include jQuery at the bottom of the body section a  lt script gt  element to include Popper js  at the bottom of the body section a  lt script gt  element to include the Bootstrap JavaScript file at the bottom of the body section    lt  doctype html gt       lt html gt       lt head gt         lt meta charset  quot utf-8 quot  gt         lt title gt Angular lt  title gt         lt base href  quot   quot  gt         lt meta name  quot viewport quot  content  quot width device-width  initial-scale 1 quot  gt         lt link rel  quot icon quot  type  quot image x-icon quot  href  quot favicon ico quot  gt         lt link rel  quot stylesheet quot  href  quot https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css quot  integrity  quot sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW dAiS6JXm quot  crossorigin  quot anonymous quot  gt       lt  head gt       lt body gt         lt app-root gt Loading    lt  app-root gt         lt script src  quot https   code jquery com jquery-3 2 1 slim min js quot  integrity  quot sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr rE9 Qpg6aAZGJwFDMVNA GpGFF93hXpG5KkN quot  crossorigin  quot anonymous quot  gt  lt  script gt   lt script src  quot https   cdnjs cloudflare com ajax libs popper js 1 12 9 umd popper min js quot  integrity  quot sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q quot  crossorigin  quot anonymous quot  gt  lt  script gt   lt script src  quot https   maxcdn bootstrapcdn com bootstrap 4 0 0 js bootstrap min js quot  integrity  quot sha384-JZR6Spejh4U02d8jOt6vLEHfe JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl quot  crossorigin  quot anonymous quot  gt  lt  script gt       lt  body gt       lt  html gt   OPTION 3  Execute npm install bootstrap In src styles css  add the following line   import  quot  bootstrap dist css bootstrap css quot   OPTION-4 ng-bootstrap It contains a set of native Angular directives based on Bootstrap   s markup and CSS  As a result  it s not dependent on jQuery or Bootstrap   s JavaScript npm install --save  ng-bootstrap ng-bootstrap  After Installation import it in your root module and register it in  NgModule imports  array import  NgbModule  from   ng-bootstrap ng-bootstrap    NgModule     declarations   AppComponent          imports   NgbModule forRoot            bootstrap   AppComponent      NOTE ng-bootstrap requires Bootstrap s 4 css to be added in your project  you need to Install it explicitly via  npm install bootstrap 4  --save In your angular json  add the file paths  to the styles array in under build target     quot styles quot            quot src styles css quot          quot node modules bootstrap dist css bootstrap min css quot         P S Do Restart Your server   ng serve    npm start

User · Answer

npm install --save bootstrap   afterwards  inside angular json  previously  angular-cli json  inside the project s root folder  find styles and add the bootstrap css file like this   for angular 6   styles                   node modules bootstrap dist css bootstrap min css              styles css       for angular 7   styles                node modules bootstrap dist css bootstrap min css              src styles css

[javascript] How to add bootstrap in angular 6 project?

The answer is

Examples related to javascript

Examples related to html

Examples related to angular

Examples related to angular-ui-bootstrap

Tags