<\/noscript><\/p>\n <\/p>\nSome alternatives to install bootstrap:<\/span><\/p>\n– manual install plus jquery via npm,\n– via bootstrap’s npm install plus jquery,\n– via bootstrap’s npm install plus ngx-bootstrap (with or without jquery install) or\n– via bootstrap’s npm install plus ng-bootstrap (with or without jquery install).<\/p>\nThe alternatives are tested using then code of the “Album” template from Bootstrap (image above).<\/p>\nThis post goes step-by-step through the first three options, and the forth follows the third.<\/p>\nAt the of the text, there is a one-step routine for installing bootstrap\/ngx env.\nI think it as a summary \u2014 the daily routine to set bootstrap in an angular project.<\/strong><\/p>\n(to reach there faster, press the button of “table of contents”, below)<\/em><\/p>\n <\/p>\n\nTable of Contents<\/p>\nToggle<\/span><\/svg><\/svg><\/span><\/span><\/label>ABOUT<\/a><\/li><\/ul>#METHOD 1 – MANUAL INSTALL<\/a>Download Code at GitHub<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li>METHOD 2 – USING NPM INSTALLER<\/a>Download Code at GitHub<\/a><\/li><\/ul><\/li>OBSERVATION<\/a><\/li>*IMPORTANT NOTE:<\/a><\/li>METHOD 3 – USING NGX-BOOTSTRAP<\/a>Download Code at GitHub<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li>SUMMARY FOR DAILY TASKS<\/a><\/li>ADDITIONAL SOURCES<\/a><\/li><\/ul><\/nav><\/div>\n<\/span>ABOUT<\/span><\/h3>\n1. It is just considered here the “npm” installer.\nPlease, choose your own, since the results are equivalent.<\/p>\n2. “ngx-bootstrap” and “ng-bootstrap” are both libraries to enable bootstrap features that would require JQuery, but without the need of explicitly installing it.<\/p>\nTranscribing this snippet of comment from Stack Overflow<\/a> for the sake of our comfort:<\/p>\n\n\nI’ve used both ngx-bootstrap(by Valor) and ng-bootstrap(by ng-boostrap). Here are my two cents of the unique features you get from them:<\/em><\/p>\nngx-bootstrap:<\/a><\/em><\/p>\n\nBuiltin animation support on almost everything (modals, accordion, collpase, dropdown, datepicker…)<\/em><\/li>\nBetter Modal support (nested modals, modal as a service, modal as a template)<\/em><\/li>\nSortable Component (with Drag&Drop Feature)<\/em><\/li>\n<\/ol>\nng-bootstrap:<\/a><\/em><\/p>\n\nNav Feature (Tabset has been made deprecated)<\/em><\/li>\nBuiltin Toast component<\/em><\/li>\nPackage size is almost half times as ngx-bootstrap (Minified + Gzipped)<\/em><\/li>\n<\/ol>\nYou can also compare between their npm download counts with npmtrends<\/a>.<\/em><\/p>\n[Note: My answer is based current latest version i.e ngx-bootstrap v5.5.0 and ng-boostrap v6.0.0]<\/em><\/p>\n<\/div>\n\n\n\n\nedited Feb 25 ’20 at 12:12<\/span><\/a><\/em><\/div>\n<\/div>\n<\/div>\n\n\nanswered Feb 25 ’20 at 12:05<\/span><\/em><\/div>\nImtiaz Shakil Siddique<\/a><\/em><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\nWhat is the difference between \u201cng-bootstrap\u201d and \u201cngx-bootstrap\u201d?<\/a><\/p>\n <\/p>\n<\/div>\nAlternative site in portuguese:<\/strong>\nthe difference between ng-bootstrap and ngx-bootstrap (portuguese)<\/a><\/p>\n <\/p>\n <\/p>\n<\/span>#METHOD 1 – MANUAL INSTALL<\/span><\/h2>\n1. Download bootstrap:<\/strong><\/p>\n– latest version:\ngetbootstrap.com\/<\/a><\/p>\n– prior versions:\nv.3.3<\/a>\nv.3.3.7<\/a>\nv.4.5<\/a><\/p>\n\n2. Extract to style dir:<\/strong><\/p>\nmkdir styles\nxcopy …\\bootstrap-4.5.3-dist ..\\PROJECT_ROOT\\src\\styles \/Y\/S\/I\/E<\/p>\n<\/noscript><\/p>\n <\/p>\n3. Import the CSS.<\/p>\nTwo alternatives:<\/p>\n3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
<\/p>\n
Some alternatives to install bootstrap:<\/span><\/p>\n– manual install plus jquery via npm,\n– via bootstrap’s npm install plus jquery,\n– via bootstrap’s npm install plus ngx-bootstrap (with or without jquery install) or\n– via bootstrap’s npm install plus ng-bootstrap (with or without jquery install).<\/p>\nThe alternatives are tested using then code of the “Album” template from Bootstrap (image above).<\/p>\nThis post goes step-by-step through the first three options, and the forth follows the third.<\/p>\nAt the of the text, there is a one-step routine for installing bootstrap\/ngx env.\nI think it as a summary \u2014 the daily routine to set bootstrap in an angular project.<\/strong><\/p>\n(to reach there faster, press the button of “table of contents”, below)<\/em><\/p>\n <\/p>\n\nTable of Contents<\/p>\nToggle<\/span><\/svg><\/svg><\/span><\/span><\/label>ABOUT<\/a><\/li><\/ul>#METHOD 1 – MANUAL INSTALL<\/a>Download Code at GitHub<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li>METHOD 2 – USING NPM INSTALLER<\/a>Download Code at GitHub<\/a><\/li><\/ul><\/li>OBSERVATION<\/a><\/li>*IMPORTANT NOTE:<\/a><\/li>METHOD 3 – USING NGX-BOOTSTRAP<\/a>Download Code at GitHub<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li>SUMMARY FOR DAILY TASKS<\/a><\/li>ADDITIONAL SOURCES<\/a><\/li><\/ul><\/nav><\/div>\n<\/span>ABOUT<\/span><\/h3>\n1. It is just considered here the “npm” installer.\nPlease, choose your own, since the results are equivalent.<\/p>\n2. “ngx-bootstrap” and “ng-bootstrap” are both libraries to enable bootstrap features that would require JQuery, but without the need of explicitly installing it.<\/p>\nTranscribing this snippet of comment from Stack Overflow<\/a> for the sake of our comfort:<\/p>\n\n\nI’ve used both ngx-bootstrap(by Valor) and ng-bootstrap(by ng-boostrap). Here are my two cents of the unique features you get from them:<\/em><\/p>\nngx-bootstrap:<\/a><\/em><\/p>\n\nBuiltin animation support on almost everything (modals, accordion, collpase, dropdown, datepicker…)<\/em><\/li>\nBetter Modal support (nested modals, modal as a service, modal as a template)<\/em><\/li>\nSortable Component (with Drag&Drop Feature)<\/em><\/li>\n<\/ol>\nng-bootstrap:<\/a><\/em><\/p>\n\nNav Feature (Tabset has been made deprecated)<\/em><\/li>\nBuiltin Toast component<\/em><\/li>\nPackage size is almost half times as ngx-bootstrap (Minified + Gzipped)<\/em><\/li>\n<\/ol>\nYou can also compare between their npm download counts with npmtrends<\/a>.<\/em><\/p>\n[Note: My answer is based current latest version i.e ngx-bootstrap v5.5.0 and ng-boostrap v6.0.0]<\/em><\/p>\n<\/div>\n\n\n\n\nedited Feb 25 ’20 at 12:12<\/span><\/a><\/em><\/div>\n<\/div>\n<\/div>\n\n\nanswered Feb 25 ’20 at 12:05<\/span><\/em><\/div>\nImtiaz Shakil Siddique<\/a><\/em><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\nWhat is the difference between \u201cng-bootstrap\u201d and \u201cngx-bootstrap\u201d?<\/a><\/p>\n <\/p>\n<\/div>\nAlternative site in portuguese:<\/strong>\nthe difference between ng-bootstrap and ngx-bootstrap (portuguese)<\/a><\/p>\n <\/p>\n <\/p>\n<\/span>#METHOD 1 – MANUAL INSTALL<\/span><\/h2>\n1. Download bootstrap:<\/strong><\/p>\n– latest version:\ngetbootstrap.com\/<\/a><\/p>\n– prior versions:\nv.3.3<\/a>\nv.3.3.7<\/a>\nv.4.5<\/a><\/p>\n\n2. Extract to style dir:<\/strong><\/p>\nmkdir styles\nxcopy …\\bootstrap-4.5.3-dist ..\\PROJECT_ROOT\\src\\styles \/Y\/S\/I\/E<\/p>\n<\/noscript><\/p>\n <\/p>\n3. Import the CSS.<\/p>\nTwo alternatives:<\/p>\n3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
– manual install plus jquery via npm,\n– via bootstrap’s npm install plus jquery,\n– via bootstrap’s npm install plus ngx-bootstrap (with or without jquery install) or\n– via bootstrap’s npm install plus ng-bootstrap (with or without jquery install).<\/p>\n
The alternatives are tested using then code of the “Album” template from Bootstrap (image above).<\/p>\n
This post goes step-by-step through the first three options, and the forth follows the third.<\/p>\n
At the of the text, there is a one-step routine for installing bootstrap\/ngx env.\nI think it as a summary \u2014 the daily routine to set bootstrap in an angular project.<\/strong><\/p>\n(to reach there faster, press the button of “table of contents”, below)<\/em><\/p>\n <\/p>\n\nTable of Contents<\/p>\nToggle<\/span><\/svg><\/svg><\/span><\/span><\/label>ABOUT<\/a><\/li><\/ul>#METHOD 1 – MANUAL INSTALL<\/a>Download Code at GitHub<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li>METHOD 2 – USING NPM INSTALLER<\/a>Download Code at GitHub<\/a><\/li><\/ul><\/li>OBSERVATION<\/a><\/li>*IMPORTANT NOTE:<\/a><\/li>METHOD 3 – USING NGX-BOOTSTRAP<\/a>Download Code at GitHub<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li>SUMMARY FOR DAILY TASKS<\/a><\/li>ADDITIONAL SOURCES<\/a><\/li><\/ul><\/nav><\/div>\n<\/span>ABOUT<\/span><\/h3>\n1. It is just considered here the “npm” installer.\nPlease, choose your own, since the results are equivalent.<\/p>\n2. “ngx-bootstrap” and “ng-bootstrap” are both libraries to enable bootstrap features that would require JQuery, but without the need of explicitly installing it.<\/p>\nTranscribing this snippet of comment from Stack Overflow<\/a> for the sake of our comfort:<\/p>\n\n\nI’ve used both ngx-bootstrap(by Valor) and ng-bootstrap(by ng-boostrap). Here are my two cents of the unique features you get from them:<\/em><\/p>\nngx-bootstrap:<\/a><\/em><\/p>\n\nBuiltin animation support on almost everything (modals, accordion, collpase, dropdown, datepicker…)<\/em><\/li>\nBetter Modal support (nested modals, modal as a service, modal as a template)<\/em><\/li>\nSortable Component (with Drag&Drop Feature)<\/em><\/li>\n<\/ol>\nng-bootstrap:<\/a><\/em><\/p>\n\nNav Feature (Tabset has been made deprecated)<\/em><\/li>\nBuiltin Toast component<\/em><\/li>\nPackage size is almost half times as ngx-bootstrap (Minified + Gzipped)<\/em><\/li>\n<\/ol>\nYou can also compare between their npm download counts with npmtrends<\/a>.<\/em><\/p>\n[Note: My answer is based current latest version i.e ngx-bootstrap v5.5.0 and ng-boostrap v6.0.0]<\/em><\/p>\n<\/div>\n\n\n\n\nedited Feb 25 ’20 at 12:12<\/span><\/a><\/em><\/div>\n<\/div>\n<\/div>\n\n\nanswered Feb 25 ’20 at 12:05<\/span><\/em><\/div>\nImtiaz Shakil Siddique<\/a><\/em><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\nWhat is the difference between \u201cng-bootstrap\u201d and \u201cngx-bootstrap\u201d?<\/a><\/p>\n <\/p>\n<\/div>\nAlternative site in portuguese:<\/strong>\nthe difference between ng-bootstrap and ngx-bootstrap (portuguese)<\/a><\/p>\n <\/p>\n <\/p>\n<\/span>#METHOD 1 – MANUAL INSTALL<\/span><\/h2>\n1. Download bootstrap:<\/strong><\/p>\n– latest version:\ngetbootstrap.com\/<\/a><\/p>\n– prior versions:\nv.3.3<\/a>\nv.3.3.7<\/a>\nv.4.5<\/a><\/p>\n\n2. Extract to style dir:<\/strong><\/p>\nmkdir styles\nxcopy …\\bootstrap-4.5.3-dist ..\\PROJECT_ROOT\\src\\styles \/Y\/S\/I\/E<\/p>\n<\/noscript><\/p>\n <\/p>\n3. Import the CSS.<\/p>\nTwo alternatives:<\/p>\n3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
(to reach there faster, press the button of “table of contents”, below)<\/em><\/p>\n <\/p>\n\nTable of Contents<\/p>\nToggle<\/span><\/svg><\/svg><\/span><\/span><\/label>ABOUT<\/a><\/li><\/ul>#METHOD 1 – MANUAL INSTALL<\/a>Download Code at GitHub<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li>METHOD 2 – USING NPM INSTALLER<\/a>Download Code at GitHub<\/a><\/li><\/ul><\/li>OBSERVATION<\/a><\/li>*IMPORTANT NOTE:<\/a><\/li>METHOD 3 – USING NGX-BOOTSTRAP<\/a>Download Code at GitHub<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li>SUMMARY FOR DAILY TASKS<\/a><\/li>ADDITIONAL SOURCES<\/a><\/li><\/ul><\/nav><\/div>\n<\/span>ABOUT<\/span><\/h3>\n1. It is just considered here the “npm” installer.\nPlease, choose your own, since the results are equivalent.<\/p>\n2. “ngx-bootstrap” and “ng-bootstrap” are both libraries to enable bootstrap features that would require JQuery, but without the need of explicitly installing it.<\/p>\nTranscribing this snippet of comment from Stack Overflow<\/a> for the sake of our comfort:<\/p>\n\n\nI’ve used both ngx-bootstrap(by Valor) and ng-bootstrap(by ng-boostrap). Here are my two cents of the unique features you get from them:<\/em><\/p>\nngx-bootstrap:<\/a><\/em><\/p>\n\nBuiltin animation support on almost everything (modals, accordion, collpase, dropdown, datepicker…)<\/em><\/li>\nBetter Modal support (nested modals, modal as a service, modal as a template)<\/em><\/li>\nSortable Component (with Drag&Drop Feature)<\/em><\/li>\n<\/ol>\nng-bootstrap:<\/a><\/em><\/p>\n\nNav Feature (Tabset has been made deprecated)<\/em><\/li>\nBuiltin Toast component<\/em><\/li>\nPackage size is almost half times as ngx-bootstrap (Minified + Gzipped)<\/em><\/li>\n<\/ol>\nYou can also compare between their npm download counts with npmtrends<\/a>.<\/em><\/p>\n[Note: My answer is based current latest version i.e ngx-bootstrap v5.5.0 and ng-boostrap v6.0.0]<\/em><\/p>\n<\/div>\n\n\n\n\nedited Feb 25 ’20 at 12:12<\/span><\/a><\/em><\/div>\n<\/div>\n<\/div>\n\n\nanswered Feb 25 ’20 at 12:05<\/span><\/em><\/div>\nImtiaz Shakil Siddique<\/a><\/em><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\nWhat is the difference between \u201cng-bootstrap\u201d and \u201cngx-bootstrap\u201d?<\/a><\/p>\n <\/p>\n<\/div>\nAlternative site in portuguese:<\/strong>\nthe difference between ng-bootstrap and ngx-bootstrap (portuguese)<\/a><\/p>\n <\/p>\n <\/p>\n<\/span>#METHOD 1 – MANUAL INSTALL<\/span><\/h2>\n1. Download bootstrap:<\/strong><\/p>\n– latest version:\ngetbootstrap.com\/<\/a><\/p>\n– prior versions:\nv.3.3<\/a>\nv.3.3.7<\/a>\nv.4.5<\/a><\/p>\n\n2. Extract to style dir:<\/strong><\/p>\nmkdir styles\nxcopy …\\bootstrap-4.5.3-dist ..\\PROJECT_ROOT\\src\\styles \/Y\/S\/I\/E<\/p>\n<\/noscript><\/p>\n <\/p>\n3. Import the CSS.<\/p>\nTwo alternatives:<\/p>\n3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
Table of Contents<\/p>\nToggle<\/span><\/svg><\/svg><\/span><\/span><\/label>ABOUT<\/a><\/li><\/ul>#METHOD 1 – MANUAL INSTALL<\/a>Download Code at GitHub<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li>METHOD 2 – USING NPM INSTALLER<\/a>Download Code at GitHub<\/a><\/li><\/ul><\/li>OBSERVATION<\/a><\/li>*IMPORTANT NOTE:<\/a><\/li>METHOD 3 – USING NGX-BOOTSTRAP<\/a>Download Code at GitHub<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li>SUMMARY FOR DAILY TASKS<\/a><\/li>ADDITIONAL SOURCES<\/a><\/li><\/ul><\/nav><\/div>\n<\/span>ABOUT<\/span><\/h3>\n1. It is just considered here the “npm” installer.\nPlease, choose your own, since the results are equivalent.<\/p>\n2. “ngx-bootstrap” and “ng-bootstrap” are both libraries to enable bootstrap features that would require JQuery, but without the need of explicitly installing it.<\/p>\nTranscribing this snippet of comment from Stack Overflow<\/a> for the sake of our comfort:<\/p>\n\n\nI’ve used both ngx-bootstrap(by Valor) and ng-bootstrap(by ng-boostrap). Here are my two cents of the unique features you get from them:<\/em><\/p>\nngx-bootstrap:<\/a><\/em><\/p>\n\nBuiltin animation support on almost everything (modals, accordion, collpase, dropdown, datepicker…)<\/em><\/li>\nBetter Modal support (nested modals, modal as a service, modal as a template)<\/em><\/li>\nSortable Component (with Drag&Drop Feature)<\/em><\/li>\n<\/ol>\nng-bootstrap:<\/a><\/em><\/p>\n\nNav Feature (Tabset has been made deprecated)<\/em><\/li>\nBuiltin Toast component<\/em><\/li>\nPackage size is almost half times as ngx-bootstrap (Minified + Gzipped)<\/em><\/li>\n<\/ol>\nYou can also compare between their npm download counts with npmtrends<\/a>.<\/em><\/p>\n[Note: My answer is based current latest version i.e ngx-bootstrap v5.5.0 and ng-boostrap v6.0.0]<\/em><\/p>\n<\/div>\n\n\n\n\nedited Feb 25 ’20 at 12:12<\/span><\/a><\/em><\/div>\n<\/div>\n<\/div>\n\n\nanswered Feb 25 ’20 at 12:05<\/span><\/em><\/div>\nImtiaz Shakil Siddique<\/a><\/em><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\nWhat is the difference between \u201cng-bootstrap\u201d and \u201cngx-bootstrap\u201d?<\/a><\/p>\n <\/p>\n<\/div>\nAlternative site in portuguese:<\/strong>\nthe difference between ng-bootstrap and ngx-bootstrap (portuguese)<\/a><\/p>\n <\/p>\n <\/p>\n<\/span>#METHOD 1 – MANUAL INSTALL<\/span><\/h2>\n1. Download bootstrap:<\/strong><\/p>\n– latest version:\ngetbootstrap.com\/<\/a><\/p>\n– prior versions:\nv.3.3<\/a>\nv.3.3.7<\/a>\nv.4.5<\/a><\/p>\n\n2. Extract to style dir:<\/strong><\/p>\nmkdir styles\nxcopy …\\bootstrap-4.5.3-dist ..\\PROJECT_ROOT\\src\\styles \/Y\/S\/I\/E<\/p>\n<\/noscript><\/p>\n <\/p>\n3. Import the CSS.<\/p>\nTwo alternatives:<\/p>\n3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
1. It is just considered here the “npm” installer.\nPlease, choose your own, since the results are equivalent.<\/p>\n
2. “ngx-bootstrap” and “ng-bootstrap” are both libraries to enable bootstrap features that would require JQuery, but without the need of explicitly installing it.<\/p>\n
Transcribing this snippet of comment from Stack Overflow<\/a> for the sake of our comfort:<\/p>\n\n\nI’ve used both ngx-bootstrap(by Valor) and ng-bootstrap(by ng-boostrap). Here are my two cents of the unique features you get from them:<\/em><\/p>\nngx-bootstrap:<\/a><\/em><\/p>\n\nBuiltin animation support on almost everything (modals, accordion, collpase, dropdown, datepicker…)<\/em><\/li>\nBetter Modal support (nested modals, modal as a service, modal as a template)<\/em><\/li>\nSortable Component (with Drag&Drop Feature)<\/em><\/li>\n<\/ol>\nng-bootstrap:<\/a><\/em><\/p>\n\nNav Feature (Tabset has been made deprecated)<\/em><\/li>\nBuiltin Toast component<\/em><\/li>\nPackage size is almost half times as ngx-bootstrap (Minified + Gzipped)<\/em><\/li>\n<\/ol>\nYou can also compare between their npm download counts with npmtrends<\/a>.<\/em><\/p>\n[Note: My answer is based current latest version i.e ngx-bootstrap v5.5.0 and ng-boostrap v6.0.0]<\/em><\/p>\n<\/div>\n\n\n\n\nedited Feb 25 ’20 at 12:12<\/span><\/a><\/em><\/div>\n<\/div>\n<\/div>\n\n\nanswered Feb 25 ’20 at 12:05<\/span><\/em><\/div>\nImtiaz Shakil Siddique<\/a><\/em><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\nWhat is the difference between \u201cng-bootstrap\u201d and \u201cngx-bootstrap\u201d?<\/a><\/p>\n <\/p>\n<\/div>\nAlternative site in portuguese:<\/strong>\nthe difference between ng-bootstrap and ngx-bootstrap (portuguese)<\/a><\/p>\n <\/p>\n <\/p>\n<\/span>#METHOD 1 – MANUAL INSTALL<\/span><\/h2>\n1. Download bootstrap:<\/strong><\/p>\n– latest version:\ngetbootstrap.com\/<\/a><\/p>\n– prior versions:\nv.3.3<\/a>\nv.3.3.7<\/a>\nv.4.5<\/a><\/p>\n\n2. Extract to style dir:<\/strong><\/p>\nmkdir styles\nxcopy …\\bootstrap-4.5.3-dist ..\\PROJECT_ROOT\\src\\styles \/Y\/S\/I\/E<\/p>\n<\/noscript><\/p>\n <\/p>\n3. Import the CSS.<\/p>\nTwo alternatives:<\/p>\n3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
I’ve used both ngx-bootstrap(by Valor) and ng-bootstrap(by ng-boostrap). Here are my two cents of the unique features you get from them:<\/em><\/p>\nngx-bootstrap:<\/a><\/em><\/p>\n\nBuiltin animation support on almost everything (modals, accordion, collpase, dropdown, datepicker…)<\/em><\/li>\nBetter Modal support (nested modals, modal as a service, modal as a template)<\/em><\/li>\nSortable Component (with Drag&Drop Feature)<\/em><\/li>\n<\/ol>\nng-bootstrap:<\/a><\/em><\/p>\n\nNav Feature (Tabset has been made deprecated)<\/em><\/li>\nBuiltin Toast component<\/em><\/li>\nPackage size is almost half times as ngx-bootstrap (Minified + Gzipped)<\/em><\/li>\n<\/ol>\nYou can also compare between their npm download counts with npmtrends<\/a>.<\/em><\/p>\n[Note: My answer is based current latest version i.e ngx-bootstrap v5.5.0 and ng-boostrap v6.0.0]<\/em><\/p>\n<\/div>\n\n\n\n\nedited Feb 25 ’20 at 12:12<\/span><\/a><\/em><\/div>\n<\/div>\n<\/div>\n\n\nanswered Feb 25 ’20 at 12:05<\/span><\/em><\/div>\nImtiaz Shakil Siddique<\/a><\/em><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\nWhat is the difference between \u201cng-bootstrap\u201d and \u201cngx-bootstrap\u201d?<\/a><\/p>\n <\/p>\n<\/div>\nAlternative site in portuguese:<\/strong>\nthe difference between ng-bootstrap and ngx-bootstrap (portuguese)<\/a><\/p>\n <\/p>\n <\/p>\n<\/span>#METHOD 1 – MANUAL INSTALL<\/span><\/h2>\n1. Download bootstrap:<\/strong><\/p>\n– latest version:\ngetbootstrap.com\/<\/a><\/p>\n– prior versions:\nv.3.3<\/a>\nv.3.3.7<\/a>\nv.4.5<\/a><\/p>\n\n2. Extract to style dir:<\/strong><\/p>\nmkdir styles\nxcopy …\\bootstrap-4.5.3-dist ..\\PROJECT_ROOT\\src\\styles \/Y\/S\/I\/E<\/p>\n<\/noscript><\/p>\n <\/p>\n3. Import the CSS.<\/p>\nTwo alternatives:<\/p>\n3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
ngx-bootstrap:<\/a><\/em><\/p>\n\nBuiltin animation support on almost everything (modals, accordion, collpase, dropdown, datepicker…)<\/em><\/li>\nBetter Modal support (nested modals, modal as a service, modal as a template)<\/em><\/li>\nSortable Component (with Drag&Drop Feature)<\/em><\/li>\n<\/ol>\nng-bootstrap:<\/a><\/em><\/p>\n\nNav Feature (Tabset has been made deprecated)<\/em><\/li>\nBuiltin Toast component<\/em><\/li>\nPackage size is almost half times as ngx-bootstrap (Minified + Gzipped)<\/em><\/li>\n<\/ol>\nYou can also compare between their npm download counts with npmtrends<\/a>.<\/em><\/p>\n[Note: My answer is based current latest version i.e ngx-bootstrap v5.5.0 and ng-boostrap v6.0.0]<\/em><\/p>\n<\/div>\n\n\n\n\nedited Feb 25 ’20 at 12:12<\/span><\/a><\/em><\/div>\n<\/div>\n<\/div>\n\n\nanswered Feb 25 ’20 at 12:05<\/span><\/em><\/div>\nImtiaz Shakil Siddique<\/a><\/em><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\nWhat is the difference between \u201cng-bootstrap\u201d and \u201cngx-bootstrap\u201d?<\/a><\/p>\n <\/p>\n<\/div>\nAlternative site in portuguese:<\/strong>\nthe difference between ng-bootstrap and ngx-bootstrap (portuguese)<\/a><\/p>\n <\/p>\n <\/p>\n<\/span>#METHOD 1 – MANUAL INSTALL<\/span><\/h2>\n1. Download bootstrap:<\/strong><\/p>\n– latest version:\ngetbootstrap.com\/<\/a><\/p>\n– prior versions:\nv.3.3<\/a>\nv.3.3.7<\/a>\nv.4.5<\/a><\/p>\n\n2. Extract to style dir:<\/strong><\/p>\nmkdir styles\nxcopy …\\bootstrap-4.5.3-dist ..\\PROJECT_ROOT\\src\\styles \/Y\/S\/I\/E<\/p>\n<\/noscript><\/p>\n <\/p>\n3. Import the CSS.<\/p>\nTwo alternatives:<\/p>\n3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
ng-bootstrap:<\/a><\/em><\/p>\n\nNav Feature (Tabset has been made deprecated)<\/em><\/li>\nBuiltin Toast component<\/em><\/li>\nPackage size is almost half times as ngx-bootstrap (Minified + Gzipped)<\/em><\/li>\n<\/ol>\nYou can also compare between their npm download counts with npmtrends<\/a>.<\/em><\/p>\n[Note: My answer is based current latest version i.e ngx-bootstrap v5.5.0 and ng-boostrap v6.0.0]<\/em><\/p>\n<\/div>\n\n\n\n\nedited Feb 25 ’20 at 12:12<\/span><\/a><\/em><\/div>\n<\/div>\n<\/div>\n\n\nanswered Feb 25 ’20 at 12:05<\/span><\/em><\/div>\nImtiaz Shakil Siddique<\/a><\/em><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\nWhat is the difference between \u201cng-bootstrap\u201d and \u201cngx-bootstrap\u201d?<\/a><\/p>\n <\/p>\n<\/div>\nAlternative site in portuguese:<\/strong>\nthe difference between ng-bootstrap and ngx-bootstrap (portuguese)<\/a><\/p>\n <\/p>\n <\/p>\n<\/span>#METHOD 1 – MANUAL INSTALL<\/span><\/h2>\n1. Download bootstrap:<\/strong><\/p>\n– latest version:\ngetbootstrap.com\/<\/a><\/p>\n– prior versions:\nv.3.3<\/a>\nv.3.3.7<\/a>\nv.4.5<\/a><\/p>\n\n2. Extract to style dir:<\/strong><\/p>\nmkdir styles\nxcopy …\\bootstrap-4.5.3-dist ..\\PROJECT_ROOT\\src\\styles \/Y\/S\/I\/E<\/p>\n<\/noscript><\/p>\n <\/p>\n3. Import the CSS.<\/p>\nTwo alternatives:<\/p>\n3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
You can also compare between their npm download counts with npmtrends<\/a>.<\/em><\/p>\n[Note: My answer is based current latest version i.e ngx-bootstrap v5.5.0 and ng-boostrap v6.0.0]<\/em><\/p>\n<\/div>\n\n\n\n\nedited Feb 25 ’20 at 12:12<\/span><\/a><\/em><\/div>\n<\/div>\n<\/div>\n\n\nanswered Feb 25 ’20 at 12:05<\/span><\/em><\/div>\nImtiaz Shakil Siddique<\/a><\/em><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\nWhat is the difference between \u201cng-bootstrap\u201d and \u201cngx-bootstrap\u201d?<\/a><\/p>\n <\/p>\n<\/div>\nAlternative site in portuguese:<\/strong>\nthe difference between ng-bootstrap and ngx-bootstrap (portuguese)<\/a><\/p>\n <\/p>\n <\/p>\n<\/span>#METHOD 1 – MANUAL INSTALL<\/span><\/h2>\n1. Download bootstrap:<\/strong><\/p>\n– latest version:\ngetbootstrap.com\/<\/a><\/p>\n– prior versions:\nv.3.3<\/a>\nv.3.3.7<\/a>\nv.4.5<\/a><\/p>\n\n2. Extract to style dir:<\/strong><\/p>\nmkdir styles\nxcopy …\\bootstrap-4.5.3-dist ..\\PROJECT_ROOT\\src\\styles \/Y\/S\/I\/E<\/p>\n<\/noscript><\/p>\n <\/p>\n3. Import the CSS.<\/p>\nTwo alternatives:<\/p>\n3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
[Note: My answer is based current latest version i.e ngx-bootstrap v5.5.0 and ng-boostrap v6.0.0]<\/em><\/p>\n<\/div>\n\n\n\n\nedited Feb 25 ’20 at 12:12<\/span><\/a><\/em><\/div>\n<\/div>\n<\/div>\n\n\nanswered Feb 25 ’20 at 12:05<\/span><\/em><\/div>\nImtiaz Shakil Siddique<\/a><\/em><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\nWhat is the difference between \u201cng-bootstrap\u201d and \u201cngx-bootstrap\u201d?<\/a><\/p>\n <\/p>\n<\/div>\nAlternative site in portuguese:<\/strong>\nthe difference between ng-bootstrap and ngx-bootstrap (portuguese)<\/a><\/p>\n <\/p>\n <\/p>\n<\/span>#METHOD 1 – MANUAL INSTALL<\/span><\/h2>\n1. Download bootstrap:<\/strong><\/p>\n– latest version:\ngetbootstrap.com\/<\/a><\/p>\n– prior versions:\nv.3.3<\/a>\nv.3.3.7<\/a>\nv.4.5<\/a><\/p>\n\n2. Extract to style dir:<\/strong><\/p>\nmkdir styles\nxcopy …\\bootstrap-4.5.3-dist ..\\PROJECT_ROOT\\src\\styles \/Y\/S\/I\/E<\/p>\n<\/noscript><\/p>\n <\/p>\n3. Import the CSS.<\/p>\nTwo alternatives:<\/p>\n3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
What is the difference between \u201cng-bootstrap\u201d and \u201cngx-bootstrap\u201d?<\/a><\/p>\n <\/p>\n<\/div>\nAlternative site in portuguese:<\/strong>\nthe difference between ng-bootstrap and ngx-bootstrap (portuguese)<\/a><\/p>\n <\/p>\n <\/p>\n<\/span>#METHOD 1 – MANUAL INSTALL<\/span><\/h2>\n1. Download bootstrap:<\/strong><\/p>\n– latest version:\ngetbootstrap.com\/<\/a><\/p>\n– prior versions:\nv.3.3<\/a>\nv.3.3.7<\/a>\nv.4.5<\/a><\/p>\n\n2. Extract to style dir:<\/strong><\/p>\nmkdir styles\nxcopy …\\bootstrap-4.5.3-dist ..\\PROJECT_ROOT\\src\\styles \/Y\/S\/I\/E<\/p>\n<\/noscript><\/p>\n <\/p>\n3. Import the CSS.<\/p>\nTwo alternatives:<\/p>\n3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
<\/p>\n<\/div>\n
Alternative site in portuguese:<\/strong>\nthe difference between ng-bootstrap and ngx-bootstrap (portuguese)<\/a><\/p>\n <\/p>\n <\/p>\n<\/span>#METHOD 1 – MANUAL INSTALL<\/span><\/h2>\n1. Download bootstrap:<\/strong><\/p>\n– latest version:\ngetbootstrap.com\/<\/a><\/p>\n– prior versions:\nv.3.3<\/a>\nv.3.3.7<\/a>\nv.4.5<\/a><\/p>\n\n2. Extract to style dir:<\/strong><\/p>\nmkdir styles\nxcopy …\\bootstrap-4.5.3-dist ..\\PROJECT_ROOT\\src\\styles \/Y\/S\/I\/E<\/p>\n<\/noscript><\/p>\n <\/p>\n3. Import the CSS.<\/p>\nTwo alternatives:<\/p>\n3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
1. Download bootstrap:<\/strong><\/p>\n– latest version:\ngetbootstrap.com\/<\/a><\/p>\n– prior versions:\nv.3.3<\/a>\nv.3.3.7<\/a>\nv.4.5<\/a><\/p>\n\n2. Extract to style dir:<\/strong><\/p>\nmkdir styles\nxcopy …\\bootstrap-4.5.3-dist ..\\PROJECT_ROOT\\src\\styles \/Y\/S\/I\/E<\/p>\n<\/noscript><\/p>\n <\/p>\n3. Import the CSS.<\/p>\nTwo alternatives:<\/p>\n3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
– latest version:\ngetbootstrap.com\/<\/a><\/p>\n– prior versions:\nv.3.3<\/a>\nv.3.3.7<\/a>\nv.4.5<\/a><\/p>\n\n2. Extract to style dir:<\/strong><\/p>\nmkdir styles\nxcopy …\\bootstrap-4.5.3-dist ..\\PROJECT_ROOT\\src\\styles \/Y\/S\/I\/E<\/p>\n<\/noscript><\/p>\n <\/p>\n3. Import the CSS.<\/p>\nTwo alternatives:<\/p>\n3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
– prior versions:\nv.3.3<\/a>\nv.3.3.7<\/a>\nv.4.5<\/a><\/p>\n\n2. Extract to style dir:<\/strong><\/p>\nmkdir styles\nxcopy …\\bootstrap-4.5.3-dist ..\\PROJECT_ROOT\\src\\styles \/Y\/S\/I\/E<\/p>\n<\/noscript><\/p>\n <\/p>\n3. Import the CSS.<\/p>\nTwo alternatives:<\/p>\n3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
\n2. Extract to style dir:<\/strong><\/p>\nmkdir styles\nxcopy …\\bootstrap-4.5.3-dist ..\\PROJECT_ROOT\\src\\styles \/Y\/S\/I\/E<\/p>\n<\/noscript><\/p>\n <\/p>\n3. Import the CSS.<\/p>\nTwo alternatives:<\/p>\n3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
mkdir styles\nxcopy …\\bootstrap-4.5.3-dist ..\\PROJECT_ROOT\\src\\styles \/Y\/S\/I\/E<\/p>\n
<\/noscript><\/p>\n <\/p>\n3. Import the CSS.<\/p>\nTwo alternatives:<\/p>\n3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
3. Import the CSS.<\/p>\n
Two alternatives:<\/p>\n
3a. Edit “angular.json” and set:<\/strong><\/p>\n\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
\t\"styles\": [\n\t\t\"src\/styles.css\",\n\t\t\"src\/styles\/bootstrap-4.5.3-dist\/css\/bootstrap.css\",\n\t],\n<\/pre>\n <\/p>\nor<\/p>\n3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
or<\/p>\n
3b. Use import:<\/strong>\n@import ‘.\/styles\/bootstrap-5.0.0-beta1-dist\/css\/bootstrap.min.css’;<\/p>\n\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
\n4. If desired jquery, do:<\/strong>\nnpm install jquery popper.js \u2013save<\/p>\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
Edit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
\"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\n <\/p>\n***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
***IMPORTANT NOTE:<\/strong><\/p>\nAvoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
Avoid using CSS resources under assets directory.<\/span>\nWhen deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span>\nThe assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span>\nOnly place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h5>\n <\/p>\n<\/span>METHOD 2 – USING NPM INSTALLER<\/span><\/h2>\n <\/p>\n1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
1. Install bootstrap using npm:<\/span><\/strong><\/span><\/p>\n\n\nFor Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
For Bootstrap 3:<\/span><\/p>\nnpm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
npm install bootstrap@3.3.7<\/span><\/p>\n<\/li>\n\nFor Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
For Bootstrap 4:<\/span><\/p>\nnpm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
npm install bootstrap@4.5.3<\/span><\/p>\n<\/li>\n\nFor latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
For latest Bootstrap version:<\/span> npm install bootstrap<\/span><\/p>\n<\/li>\n<\/ul>\n\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
\n2. Import the CSS.<\/span><\/strong><\/span><\/p>\nEdit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
Edit “angular.json” and set:<\/span><\/span><\/p>\n\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
\"styles\": [<\/span>\n \"src\/styles.css\",<\/span>\n \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\",<\/span>\n \"src\/styles\/css\/album.css\"<\/span>\n],<\/span><\/pre>\n3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
3. If desired jquery, do:<\/span><\/strong><\/span><\/p>\nnpm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
npm install jquery popper.js –save<\/span><\/p>\n\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
\nEdit angular.json and set:<\/span><\/p>\n \"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
\"scripts\": [<\/span>\n \"node_modules\/jquery\/dist\/jquery.js\",<\/span>\n \"node_modules\/popper.js\/dist\/umd\/popper.js\",<\/span>\n \"node_modules\/bootstrap\/dist\/js\/bootstrap.js\"<\/span>\n ]<\/span><\/pre>\nNOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
NOTE: you join install commands:\nnpm install bootstrap@4.5.3 jquery popper.js –save<\/span><\/p>\n <\/p>\n<\/span>Download Code at GitHub<\/a><\/span><\/h3>\n<\/h2>\n<\/span>OBSERVATION<\/span><\/strong><\/span><\/span><\/h2>\nPersonally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
Personally, I do not use the “@import” annotation. Something like this:<\/span><\/p>\n@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
@import “..\/..\/..\/node_modules\/bootstrap\/dist\/css\/bootstrap.min.css”;<\/span><\/em><\/span><\/p>\nThe configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
The configuration when is set in “angular.json” file is a much better option.<\/span><\/p>\n <\/p>\n<\/span>*<\/em>IMPORTANT NOTE:<\/span><\/strong><\/span><\/span><\/h2>\nDon’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
Don’t use the assets directory to set the CSS files.<\/span> When deploying to the production using Angular CLI, the CSS files registered in angular.json are minified and bundled into a single styles.css.<\/span> The assets folder is copied to the dist folder during the build process then, the CSS code get duplicated.<\/span> Only place CSS files under assets if importing them directly in the index.html.<\/span><\/p>\n <\/p>\n<\/span>METHOD 3 – USING NGX-BOOTSTRAP<\/span><\/h2>\n <\/p>\n<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
<\/noscript><\/p>\n\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
\n1. Please, perform the same routine used for method 1 or 2.<\/strong><\/p>\n\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
\n2. Install ngx-bootstrap.<\/strong><\/p>\nnpm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\nNOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
npm install ngx-bootstrap –save\nor\nnpm i ngx-bootstrap<\/p>\n
NOTES:<\/strong><\/p>\na<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
a<\/strong>. ng2-bootstrap is the errlier name for ngx-bootstrap.<\/p>\nb<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
b<\/strong>. Any doubt about the differences between the commands above?\nFor this example, using npm 6.X, they are equivalents.<\/p>\nMore information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
More information?\nSpecifying dependencies and devDependencies in a package.json file<\/a>\nWhat is the –save option for npm install?<\/a><\/p>\n\nc<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
c<\/strong>. The installation may returns some warns like this:\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: …<\/p>\nGo ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
Go ahead.\nIf desired, follow its instructions. Example:\nfound 4 vulnerabilities (3 low, 1 high)\nrun `npm audit fix` to fix them, or `npm audit` for details\nBe prepared, “audit fix” may take some time.<\/p>\n
3. Decide the components you wish to use.<\/strong><\/p>\nCheck ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
Check ngx-bootstrap documentation<\/a>.<\/p>\nFollowing the documentation, pick your choices.<\/p>\n
Following the documentation, pick your choices.<\/p>\n
![](\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/01\/angular_cssLab1-1.jpg\")
![](\"https:\/\/ultering.com\/itstuff\/wp-content\/uploads\/2021\/01\/angular_manual_bootstrap_install_cssLab1.jpg\")
![](\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/01\/angular-cssLab1-npm-ngx.jpg\")