How to add bootstrap to an angular-cli project

Question

We want to use bootstrap 4  4 0 0-alpha 2  in our app generated with angular-cli 1 0 0-beta 5  w  node v6 1 0    After getting bootstrap and its dependencies with npm  our first approach consisted in adding them in angular-cli-build js    bootstrap dist      min   js css       jquery dist jquery min   js map       tether dist      min   js css      and import them in our index html   lt script src  vendor jquery dist jquery min js  gt  lt  script gt   lt script src  vendor tether dist js tether min js  gt  lt  script gt   lt link rel  stylesheet  type  text css  href  vendor bootstrap dist css bootstrap min css  gt   lt script src  vendor bootstrap dist js bootstrap min js  gt  lt  script gt    This worked fine with ng serve but as soon as we produced a build with -prod flag all these dependencies disappeared from dist vendor  surprise      How we are intended to handle such scenario  i e  loading bootstrap scripts  in a project generated with angular-cli    We had the following thoughts but we don t really know which way to go      use a CDN   but we would rather serve these files to guarantee that they will be available copy dependencies to dist vendor after our ng build -prod   But that seems like something angular-cli should provide since it  takes care  of the build part   adding jquery  bootstrap and tether in src system-config ts and somehow pull them into our bundle in main ts   But that seemed wrong considering that we are not going to explicitly use them in our application s code  unlike moment js or something like lodash  for example

User · Answer

Install bootstrap  popper js    npm install --save bootstrap npm install --save popper js   In src styles css  import bootstrap s style    import   bootstrap dist css bootstrap min css

User · Answer

for bootstrap 4 5  angular 10 npm install bootstrap --save  update your styles scss like this with bootstrap import statement    theme-colors         quot primary quot       b867c6       quot secondary quot     f3e5f5       quot success quot       388e3c       quot info quot          00acc1       quot light quot         f3e5f5       quot dark quot          863895      import  quot  bootstrap quot     import url  https   fonts googleapis com css2 family Raleway amp display swap     body       color  gray  800        background-color  theme-color  light        font-family   Raleway   sans-serif     importing bootstrap should be after your variable overwrites   this example also shows how you can put your own theme colors

User · Answer

Just add these three lines in Head tag in index html    lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt

User · Answer

Run in bash npm install ng2-bootstrap bootstrap --save Add Change the following in angular-cli json  styles             node modules bootstrap dist css bootstrap min css          scripts             node modules jquery dist jquery min js           node modules bootstrap dist js bootstrap min js

User · Answer

Looking up for the key word   Global Library Installation on https   github com angular angular-cli helps you finding the answer   As per their document  you can take following steps to add Bootstrap library   First install Bootstrap from npm   npm install bootstrap next   Then add the needed script files to to apps 0  scripts in angular-cli json file     scripts             node modules bootstrap dist js bootstrap js           Finally add the Bootstrap CSS to the apps 0  styles array    styles          styles css           node modules bootstrap dist css bootstrap css           Restart ng serve if you re running it  and Bootstrap 4 should be working on your app   This is best solution  But if you don t restart ng serve it never works  It is strongly recommended to do this last action

User · Answer

Run This Command  npm install bootstrap 3   your Angular json   styles        node modules bootstrap dist css bootstrap min css      src styles css

User · Answer

For Adding Bootstrap and Jquery both   npm install bootstrap 3 jquery --save   after running this command  please go ahead and check your node modules folder you should be able to see bootstrap and jquery added into it

User · Answer

You can also watch this video by Mike Brocchi which has useful information on how to add bootstrap to your Angular-Cli generated project   https   www youtube com watch v obbdFFbjLIU  around minutes 13 00

User · Answer

Add this in your styles css file  import  quot  bootstrap dist css bootstrap css quot

User · Answer

Since this became so confusing and the answers here are totally mixed I will just suggest going with the official ui-team for BS4 repo  yes there are so many of those repos for NG-Bootstrap    Just follow the instructions here https   github com ng-bootstrap ng-bootstrap to get BS4    Quoting from the lib       This library is being built from scratch by the ui-bootstrap team  We   are using TypeScript and targeting the Bootstrap 4 CSS framework       As with Bootstrap 4  this library is a work in progress  Please check   out our list of issues to see all the things we are implementing  Feel   free to make comments there    Just copy pasting what is there for the sake of it    npm install --save  ng-bootstrap ng-bootstrap   Once installed you need to import our main module   import  NgbModule  from   ng-bootstrap ng-bootstrap     The only remaining part is to list the imported module in your application module  The exact method will be slightly different for the root  top-level  module for which you should end up with the code similar to  notice NgbModule forRoot      import  NgbModule  from   ng-bootstrap ng-bootstrap     NgModule     declarations   AppComponent          imports   NgbModule forRoot              bootstrap   AppComponent     export class AppModule       Other modules in your application can simply import NgbModule   import  NgbModule  from   ng-bootstrap ng-bootstrap     NgModule     declarations   OtherComponent          imports   NgbModule            export class OtherModule       This seems to be the most consistent behavior by far

User · Answer

You have many ways to add Bootstrap 4 in your Angular project    Including the Bootstrap CSS and JavaScript files in the  section of the index html file of your Angular project with a  and  tags  Importing the Bootstrap CSS file in the global styles css file of your Angular project with an  import keyword  Adding the Bootstrap CSS and JavaScript files in the styles and scripts arrays of the angular json file of your project

User · Answer

It doesn t matter which JS framework you are using  importing bootstrap to your project is easy by following 2 steps below    Install bootstrap using npm i -S bootstrap or yarn add bootstrap   In styles css or styles scss  import bootstrap as  import   bootstrap dist css bootstrap min css

User · Answer

Try this  npm install bootstrap next   https   github com angular angular-cli global-library-installation

User · Answer

Steps for Bootstrap 4 in Angular 5    Create Angular 5 Project   ng new AngularBootstrapTest Move to project directory   cd AngularBootstrapTest Download bootstrap  npm install bootstrap Add Bootstrap to Project  4 1 open  angular-cli json  4 2 find the  styles  section in the json  4 3 add the bootstrap css path as below      styles            node modules bootstrap dist css bootstrap min css       styles css           Now you have succesfully added the bootstrap css in angular 5 project   Test bootstrap   open src app app component html add bootstrap button component       lt button type  button  class  btn btn-primary  gt Primary lt  button gt    you can refer the button styles here  https   getbootstrap com docs 4 0 components buttons      save the file run the project  ng serve --open   Now You will see the bootstrap style button in the page  Note     if you added bootstrap path after ng serve   you must stop and rerun the ng serve to reflect the changes

User · Answer

Since nobody referred to the official  angular-cli team  story on how to include Bootstrap yet  https   github com angular angular-cli wiki stories-include-bootstrap  Include Bootstrap  Bootstrap is a popular CSS framework which can be used within an Angular project  This guide will walk you through adding bootstrap to your Angular CLI project and configuring it to use bootstrap   Using CSS  Getting Started  Create a new project and navigate into the project  ng new my-app cd my-app   Installing Bootstrap  With the new project created and ready you will next need to install bootstrap to your project as a dependency  Using the --save option the dependency will be saved in package json    version 3 x npm install bootstrap --save    version 4 x npm install bootstrap next --save   Configuring Project  Now that the project is set up it must be configured to include the bootstrap CSS    Open the file  angular-cli json from the root of your project  Under the property apps the first item in that array is the default application  There is a property styles which allows external global styles to be applied to your application  Specify the path to bootstrap min css   It should look like the following when you are done    styles                 node modules bootstrap dist css bootstrap min css            styles css             Note  When you make changes to  angular-cli json you will need to re-start ng serve to pick up configuration changes   Testing Project  Open app component html and add the following markup    lt button class  btn btn-primary  gt Test Button lt  button gt    With the application configured  run ng serve to run your application in develop mode  In your browser navigate to the application localhost 4200  Verify the bootstrap styled button appears   Using SASS  Getting Started  Create a new project and navigate into the project  ng new my-app --style scss cd my-app   Installing Bootstrap    version 3 x npm install bootstrap-sass --save    version 4 x npm install bootstrap next --save   Configuring Project  Create an empty file  variables scss in src    If you are using bootstrap-sass  add the following to  variables scss    icon-font-path      node modules bootstrap-sass assets fonts bootstrap      In styles scss add the following      version 3  import  variables    import     node modules bootstrap-sass assets stylesheets  bootstrap       version 4  import  variables    import     node modules bootstrap scss bootstrap     Testing Project  Open app component html and add the following markup    lt button class  btn btn-primary  gt Test Button lt  button gt    With the application configured  run ng serve to run your application in develop mode  In your browser navigate to the application localhost 4200  Verify the bootstrap styled button appears  To ensure your variables are used open  variables scss and add the following    brand-primary  red    Return the browser to see the font color changed

User · Answer

Open Terminal command prompt in the respective project directory and type following command   npm install --save bootstrap   Then open  angular-cli json file  Look for    styles              styles css            change that to     styles             node modules bootstrap dist css bootstrap min css        styles css         All done

User · Answer

Update v1 0 0-beta 26   You can see on the doc for the new way for importing bootstrap here  If it still does not work  restart with the command ng serve  1 0 0 or below versions   In your index html file you just need bootstrap css link  no need js scripts    lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet  gt    And   npm install ng2-bootstrap --save npm install moment --save   After having installed   ng2-bootstrap in my project src system-config ts        Map relative paths to URLs     const map  any        moment    vendor moment moment js      ng2-bootstrap    vendor ng2-bootstrap          User packages configuration     const packages  any        ng2-bootstrap         defaultExtension   js          moment         format   cjs           And in my project angular-cli-build js     module exports   function  defaults    return new Angular2App defaults        vendorNpmFiles             ng2-bootstrap                 moment moment js                 Don t forget this command  to put your module in the vendor     ng build   to import from another module that is the same principle

User · Answer

IMPORTANT UPDATE  ng2-bootstrap is now replaced by ngx-bootstrap  ngx-bootstrap supports both Angular 3 and 4    Update   1 0 0-beta 11-webpack or above versions  First of all check your angular-cli version with the following command in the terminal   ng -v   If your angular-cli version is greater than 1 0 0-beta 11-webpack  then you should follow these steps    Install ngx-bootstrap and bootstrap            npm install ngx-bootstrap bootstrap --save    This line installs Bootstrap 3 nowadays  but can install Bootstrap 4 in the future  Keep in mind ngx-bootstrap supports both versions    Open src app app module ts and add   import   AlertModule   from  ngx-bootstrap        NgModule       imports   AlertModule forRoot                    Open angular-cli json  for angular6 and later file name changed to angular json   and insert a new entry into the styles array    styles      styles css       node modules bootstrap dist css bootstrap min css      Open src app app component html and add    lt alert type  success  gt hello lt  alert gt     1 0 0-beta 10 or below versions   And  if your angular-cli version is 1 0 0-beta 10 or below  then you can use below steps   First  go to the project directory and type   npm install ngx-bootstrap --save   Then  open your angular-cli-build js and add this line   vendorNpmFiles               ngx-bootstrap      js              Now  open your src system-config ts then write   const map any                ngx-bootstrap    vendor ngx-bootstrap                 and   const packages  any        ngx-bootstrap         format   cjs       defaultExtension   js       main   ngx-bootstrap js

User · Answer

angular-cli now has a dedicated wiki page where you can find everything you need  TLDR  install bootstrap via npm and add the styles link to  styles  section in your  angular-cli json file

User · Answer

Run this following command inside the project   npm install --save  bootsrap 4   and if you get a confirmation like this     bootstrap 4 1 3 updated 1 package in 8 245s   It means boostrap 4 is successfully installed  However  in order to use it  you need to update the  styles  array under the angular json file    Update it the following way so that bootstrap will be able to override the existing styles   styles                node modules bootstrap dist css bootstrap min css               src styles css                 To make sure everything is set up correctly  run ng serve  gt  open browser at http   localhost 4200  or a port you run the angular app  gt  right click  gt  inspect  gt  under the head check the styles if you have bootsrap like shown below  then you are good to use boostrap

User · Answer

I guess the above methods have changed after the release  check this link out  https   github com valor-software ng2-bootstrap blob development docs getting-started ng-cli md  initiate project  npm i -g angular-cli ng new my-app cd my-app ng serve npm install --save  ng-bootstrap ng-bootstrap   install ng-bootstrap and bootstrap  npm install ng2-bootstrap bootstrap --save   open src app app module ts and add  import   AlertModule   from  ng2-bootstrap ng2-bootstrap         NgModule             imports   AlertModule                       open angular-cli json and insert a new entry into the styles array   styles              styles css               node modules bootstrap dist css bootstrap min css             open src app app component html and test all works by adding   lt alert type  success  gt hello lt  alert gt

User · Answer

you can install bootstrap in angular using npm install bootstrap command   and next setup bootstrap path in angular json file and style css file   you can read a full blog about how to install  amp  setup bootstrap in angular   click here to read full blog about this

User · Answer

Do the following steps    npm install --save bootstrap And in your  angular-cli json  add to styles section      styles         node modules bootstrap dist css bootstrap min css    styles css    After that  you must restart your ng serve  Enjoy

User · Answer

A working example in case of using angular-cli   npm i bootstrap-schematics ng generate bootstrap-shell -c bootstrap-schematics -v 4 npm install   Works for css and scss  Bootstrap v3 and v4 are available   More information about bootstrap-schematics please find here

User · Answer

If you have just started with angular and bootstrap then simple answer would be below steps  1  Add node package of bootstrap as dev dependency  npm install --save bootstrap    import bootstrap stylessheet in angular json file    styles                    projects my-app src styles scss                    node modules bootstrap dist css bootstrap min css                 and you are ready to use bootstrap for styling  grid etc    lt div class  container  gt My first bootstrap div lt  div gt    The best part of this which I found was that we are directing using bootstrap without any third-party module dependency  We can upgrade bootstrap anytime by just updating the command npm install --save bootstrap 4 4 etc

User · Answer

Updated Aug-2020  Angular 10   quot If you have an Angular   9 CLI project  you could simply use our schematics to add ng-bootstrap library to it  quot  Just run the following command inside your project folder  All the configurations will be automatically added   ng add  ng-bootstrap ng-bootstrap ng s Sample Snippets  import  Component  from   angular core     Component  selector   ngbd-alert-basic   templateUrl     alert-basic html    export class NgbdAlertBasic        x000D   x000D   lt p gt     lt ngb-alert  dismissible   false  gt       lt strong gt Warning  lt  strong gt  Better check yourself  you re not looking too good     lt  ngb-alert gt   lt  p gt  x000D   x000D   x000D

User · Answer

Install bootstrap  npm install bootstrap next  Add code to  angular-cli json    styles        styles css         node modules bootstrap dist css bootstrap css      scripts           node modules jquery dist jquery js         node modules tether dist js tether js         node modules bootstrap dist js bootstrap js      Last add bootstrap css to your code style scss   import     node modules bootstrap dist css bootstrap min css    Restart your local server

User · Answer

Didn t see this one here     import  bootstrap scss bootstrap scss     I just added this line in style scss In my case i also wanted to override bootstrap variables

User · Answer

Working example in case of using angular-cli and css    1 install bootstrap  npm install bootstrap tether jquery --save  2 add to  angular-cli json     styles             node modules bootstrap dist css bootstrap css          scripts             node modules jquery dist jquery js           node modules tether dist js tether js           node modules bootstrap dist js bootstrap js

User · Answer

Install bootstrap using npm i --save bootstrap version Now go to nodemodules folder and from bootstrap folder copy the path of  bootstrap min css js  and paste the full path like nodemodules bootstrap css bootstrap min css js  in angular json under script tag file and re-run the server and to check whether the installation is successful run the program in any browser you like and press F12 you ll find a part of the window gets opened now go to elements tab open head tag and if you see bootstrap in style tag then your installation is successful

User · Answer

Now with new ng-bootstrap 1 0 0-beta 5 version supports most of the native Angular directives based on Bootstrap s markup and CSS    The only dependency required to work with this is bootstrap  No Need to use jquery and popper js dependencies   ng-bootstrap is to completely replaced JavaScript implementation for components  So you don t need to include bootstrap min js in the scripts section in your  angular-cli json   follow these steps when you are integrating bootstrap with generated project with angular-cli latest version    Inculde bootstrap min css in your  angular-cli json  styles section    styles         styles scss          node modules bootstrap dist css bootstrap min css      Install ng-bootstrap dependency   npm install --save  ng-bootstrap ng-bootstrap  Add this to your main module class   import  NgbModule  from   ng-bootstrap ng-bootstrap    Include the following in your main module imports section    NgModule      imports   NgbModule forRoot              Do the following also in your sub module s  if you are going to use ng-bootstrap components inside those module classes   import  NgbModule  from   ng-bootstrap ng-bootstrap     NgModule      imports   NgbModule            Now your project is ready to use available ng-bootstrap components

User · Answer

I see lot of the solutions don t work anymore with the new versions of Angular-CLI  You can try to add the following link tag at top and script tags at the bottom in your app component html   lt link rel  quot stylesheet quot  href  quot https   stackpath bootstrapcdn com bootstrap 4 5 0 css bootstrap min css quot  integrity  quot sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc NcPb1dKGj7Sk quot  crossorigin  quot anonymous quot  gt     lt script src  quot https   code jquery com jquery-3 5 1 slim min js quot  integrity  quot sha384-DfXdz2htPH0lsSSs5nCTpuj zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj quot  crossorigin  quot anonymous quot  gt  lt  script gt   lt script src  quot https   cdn jsdelivr net npm popper js 1 16 0 dist umd popper min js quot  integrity  quot sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo quot  crossorigin  quot anonymous quot  gt  lt  script gt   lt script src  quot https   stackpath bootstrapcdn com bootstrap 4 5 0 js bootstrap min js quot  integrity  quot sha384-OgVRvuATP1z7JjHLkuOU7Xw704 h835Lr 6QL9UvYjZE3Ipu6Tp75j7Bh kR0JKI quot  crossorigin  quot anonymous quot  gt  lt  script gt   But if you want to use ngx-bootstrap then run the following command in your project directory ng add ngx-bootstrap  Test it out with following as the content of your app component html  lt button type  quot button quot  class  quot btn btn-outline-primary quot  gt Primary lt  button gt   lt button type  quot button quot  class  quot btn btn-outline-secondary quot  gt Secondary lt  button gt   lt button type  quot button quot  class  quot btn btn-outline-success quot  gt Success lt  button gt   lt button type  quot button quot  class  quot btn btn-outline-danger quot  gt Danger lt  button gt   lt button type  quot button quot  class  quot btn btn-outline-warning quot  gt Warning lt  button gt   lt button type  quot button quot  class  quot btn btn-outline-info quot  gt Info lt  button gt   lt button type  quot button quot  class  quot btn btn-outline-light quot  gt Light lt  button gt   lt button type  quot button quot  class  quot btn btn-outline-dark quot  gt Dark lt  button gt

User · Answer

Good News  Basically  Bootstrap 5 can be implemented easily now  and you don t even need jQuery   From your terminal  just run npm install bootstrap next --save  So  Angular uses webpack  therefore  in your app module ts  just add  import  quot bootstrap quot    Or if you want to import them separately  do it like  import   ModuleToBeImported   from  bootstrap    Then to your styles scss  add   import   bootstrap scss bootstrap    Basically that s it  BUT beware that some components require popper js  Components requiring bootstrap s js There you ll see the components dependent on popper js too  which at the time of writing this are Dropdowns for displaying and positioning  and Tooltips and popovers for displaying and positioning  Therefore  to install popper js  just run  npm install  popperjs core  Reference

User · Answer

Do the following   npm i bootstrap next --save   This will add bootstrap 4 to your project   Next go to your src style scss or src style css file  choose whichever you are using  and import bootstrap there   For style css     You can add global styles to this file  and also import other style files     import     node modules bootstrap dist css bootstrap min css     For style scss     You can add global styles to this file  and also import other style files     import     node modules bootstrap scss bootstrap     For scripts you will still have to add the file in the angular-cli json  file like so  In Angular version 6  this edit needs to be done in the file angular json     scripts                 node modules jquery dist jquery js               node modules tether dist js tether js               node modules bootstrap dist js bootstrap js

User · Answer

Install Bootstrap using npm  npm install bootstrap    2 Install Popper js  npm install --save popper js   3 Goto angular json in Angular 6 project    angular-cli json in Angular 5 and add the listed     styles                node modules bootstrap dist css bootstrap css              src styles css                       scripts                node modules popper js dist umd popper min js              node modules bootstrap dist js bootstrap min js

User · Answer

2 simple steps   Install Bootstrap   am installing latest version    npm install bootstrap next   Import into your project  add below line in your styles scss    import   bootstrap     Please Note your order of imports might matter  if you have other libraries which uses bootstrap  please keep this import statement on top The End      NOTE  below are my versions  angular   9 node   v10 16 0 npm   6 9 1

User · Answer

install boostrap using npm   npm install boostrap next --save   then check your node modules folder for boostrap css file within dist  normally the path is       node modules bootstrap dist css bootstrap css     add this path   import boostrap within style css or style scss   import     node modules bootstrap dist css bootstrap css      bootstrap  import    angular material prebuilt-themes indigo-pink css    angular material theme   that s it

User · Answer

At first  you have to install tether  jquery and bootstrap with these commands  npm i -S tether npm i -S jquery npm i -S bootstrap 4 0 0-alpha 4    After add these lines in your angular-cli json  angular json from version 6 onwards  file      styles          styles scss           node modules bootstrap scss bootstrap-flex scss          scripts             node modules jquery dist jquery js           node modules tether dist js tether js           node modules bootstrap dist js bootstrap js

User · Answer

Step1      npm install bootstrap latest --save-dev This will install the latest version of the bootstrap   However  the specified version can be installed by adding the version number  Step2  Open styles css and add the following      import   bootstrap dist css bootstrap css

[angular] How to add bootstrap to an angular-cli project

Examples related to angular

Examples related to twitter-bootstrap

Examples related to angular-cli

Examples related to ngx-bootstrap