How to use Bootstrap in an Angular project

Question

I am starting my first Angular application and my basic setup is done   How can I add Bootstrap to my application   If you can provide an example then it would be a great help

User · Answer

npm install --save bootstrap go to -  angular-cli json file  find styles properties and just add next sting      node modules bootstrap dist css bootstrap min css   It might be looks like this    styles         node modules bootstrap dist css bootstrap min css    styles css

User · Answer

If you plan on using Bootstrap 4 which is required with the angular-ui team s ng-bootstrap that is mentioned in this thread  you ll want to use this instead  NOTE  you don t need to include the JS file       lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 css bootstrap min css  integrity  sha384-rwoIResjU2yc3z8GV NPeZWAv56rSmLldC3R AZzGRnGxQQKnKkoFVhFQhNUwEyJ  crossorigin  anonymous  gt    You can also reference this locally after running npm install bootstrap 4 0 0-alpha 6 --save by pointing to the file in your styles scss file  assuming you re using SASS    import        node modules bootstrap dist css bootstrap min css

User · Answer

The most popular option is to use some third party library distributed as npm package like ng2-bootstrap project https   github com valor-software ng2-bootstrap or Angular UI Bootstrap library   I personally use ng2-bootstrap  There are many ways to configure it  because configuration depends on how your Angular project is build  Underneath I post example configuration based on Angular 2 QuickStart project https   github com angular quickstart  Firstly we add dependencies in our package json             dependencies           angular common     2 4 0         angular compiler     2 4 0         angular core     2 4 0                  bootstrap     3 3 7        ng2-bootstrap    1 1 16-11               Then we have to map names to proper URL s in systemjs config js   function  global      System config                  map tells the System loader where to look for things     map             our app is within the app folder       app   app             angular bundles         angular core    npm  angular core bundles core umd js           angular common    npm  angular common bundles common umd js           angular compiler    npm  angular compiler bundles compiler umd js           angular platform-browser    npm  angular platform-browser bundles platform-browser umd js           angular platform-browser-dynamic    npm  angular platform-browser-dynamic bundles platform-browser-dynamic umd js           angular http    npm  angular http bundles http umd js           angular router    npm  angular router bundles router umd js           angular forms    npm  angular forms bundles forms umd js            bootstrap        moment    npm moment bundles moment umd js          ng2-bootstrap    npm ng2-bootstrap bundles ng2-bootstrap umd js             other libraries        rxjs                         npm rxjs          angular-in-memory-web-api    npm angular-in-memory-web-api bundles in-memory-web-api umd js                      this     We have to import bootstrap  css file in index html  We can get it from  node modules bootstrap directory on our hard drive  because we added bootstrap 3 3 7 dependency  or from web  There we are obtaining it from web    lt  DOCTYPE html gt   lt html gt     lt head gt               lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet  gt             lt  head gt      lt body gt       lt my-app gt Loading    lt  my-app gt     lt  body gt   lt  html gt    We should edit our app module ts file from  app directory  import   NgModule        from   angular core   import   BrowserModule   from   angular platform-browser      bootstrap alert import part 1 import  AlertModule  from  ng2-bootstrap    import   AppComponent    from    app component      NgModule       bootstrap alert import part 2   imports         BrowserModule  AlertModule forRoot        declarations    AppComponent      bootstrap       AppComponent      export class AppModule       And finally our app component ts file from  app directory  import   Component   from   angular core     Component       selector   my-app       template         lt alert type  success  gt          Well done       lt  alert gt            export class AppComponent        constructor            Then we have to install our bootstrap and ng2-bootstrap dependencies before we run our app  We should go to our project directory and type  npm install   Finally we can start our app  npm start   There are many code samples on ng2-bootstrap project github showing how to import ng2-bootstrap to various Angular 2 project builds  There is even plnkr sample  There is also API documentation on Valor-software  authors of the library  website

User · Answer

In an angular-cli environment  the most straightforward way I ve found is the following    1  Solution in an environment with s c s s  stylesheets  npm install bootstrap-sass    save   In style scss    icon-font-path    bootstrap-sass assets fonts bootstrap     import   bootstrap-sass assets stylesheets bootstrap     Note1  The   character is a reference to nodes modules folder  Note2  As we are using scss  we can customize all boostrap variables we want    2  Solution in an environment with c s s  stylesheets  npm install bootstrap    save   In style css    import   bootstrap dist css bootstrap css

User · Answer

Procedure with Angular 6   amp  Bootstrap 4       Open a shell on the folder of your project Install bootstrap with the command   npm install --save bootstrap 4 1 3 Bootstrap need the dependency jquery  so if you don t have it  you can install it with the command   npm install --save jquery 1 9 1 You may need to fix vulnerability with the command   npm audit fix In your main style scss file  add the following line    import     node modules bootstrap dist css bootstrap min css     OR  Add this line to your main index html file    lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css  integrity  sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW dAiS6JXm  crossorigin  anonymous  gt

User · Answer

There are several ways to configure angular2 with Bootstrap  one of the most complete ways to get the most of it is to use ng-bootstrap  using this configuration we give to algular2 complete control over our DOM  avoiding the need to use JQuery and Boostrap js   1-Take as a starting point a new project created with Angular-CLI and using the command line  install ng-bootstrap   npm install  ng-bootstrap ng-bootstrap --save   Note  More info at https   ng-bootstrap github io   getting-started  2-Then we need to install bootstrap for the css and the grid system   npm install bootstrap 4 0 0-beta 2 --save   Note  More info at https   getbootstrap com docs 4 0 getting-started download   Now we have the setup the environment and for that we have to change the  angular-cli json adding to the style       node modules bootstrap dist css bootstrap min css    Here is an example    apps                  root    src                               index    index html                     prefix    app          styles                 node modules bootstrap dist css bootstrap min css            styles css                  scripts              environmentSource    environments environment ts          environments              dev    environments environment ts            prod    environments environment prod ts                      The next step is to add the ng-boostrap module to our project  to do so we need to add on the app module ts   import   NgbModule   from   ng-bootstrap ng-bootstrap     Then add the new module to the application app  NgbModule forRoot    Example    NgModule     declarations        AppComponent      AppNavbarComponent        imports        BrowserModule      NgbModule forRoot          providers        bootstrap   AppComponent       Now we can start using bootstrap4 on our angular2 5 project

User · Answer

An integration with Angular2 is also available through the ng2-bootstrap project   https   github com valor-software ng2-bootstrap   To install it simply put these files in your main HTML page    lt script src  https   cdnjs cloudflare com ajax libs ng2-bootstrap x x x ng2-bootstrap min js  gt  lt  script gt   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet  gt    Then you can use it into your components this way   import  Component  from  angular2 core   import  Alert  from  ng2-bootstrap ng2-bootstrap     Component     selector   my-app     directives   Alert     template    lt alert type  info  gt ng2-bootstrap hello world  lt  alert gt      export class AppComponent

User · Answer

Add this to your package json      dependency     quot bootstrap quot    quot  3 3 7 quot   In  angular-cli json file  to your    Styles    add  quot    node modules bootstrap dist css bootstrap css quot   update your npm by using this command npm update

User · Answer

Provided you use the Angular-CLI to generate new projects  there s another way to make bootstrap accessible in Angular 2 4    Via command line interface navigate to the project folder  Then use npm to install bootstrap    npm install --save bootstrap  The --save option will make bootstrap appear in the dependencies  Edit the  angular-cli json file  which configures your project  It s inside the project directory  Add a reference to the  styles  array  The reference has to be the relative path to the bootstrap file downloaded with npm  In my case it s      node modules bootstrap dist css bootstrap min css     My example  angular-cli json         schema      node modules  angular cli lib config schema json      project          name    bootstrap-test          apps                  root    src          outDir    dist          assets              assets            favicon ico                  index    index html          main    main ts          polyfills    polyfills ts          test    test ts          tsconfig    tsconfig app json          testTsconfig    tsconfig spec json          prefix    app          styles                 node modules bootstrap dist css bootstrap min css            styles css                  scripts              environmentSource    environments environment ts          environments              dev    environments environment ts            prod    environments environment prod ts                        e2e          protractor            config      protractor conf js                lint                  project    src tsconfig app json                      project    src tsconfig spec json                      project    e2e tsconfig e2e json                test          karma            config      karma conf js                defaults          styleExt    css        component              Now bootstrap should be part of your default settings

User · Answer

Another very good  better   alternative is to use a set of widgets created by the angular-ui team  https   ng-bootstrap github io

User · Answer

If you use angular cli  after adding bootstrap into package json and install the package  all you need is add boostrap min css into  angular-cli json s  styles  section   One important thing is  When you make changes to  angular-cli json you will need to re-start ng serve to pick up configuration changes    Ref   https   github com angular angular-cli wiki stories-include-bootstrap

User · Answer

All you need to do is include the boostrap css within your index html file    lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet  integrity  sha384-1q8mTJOASx8j1Au a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7  crossorigin  anonymous  gt

User · Answer

I was looking for same answer and finally I found this link  You can find explained three different ways how to add bootstrap css into your angular 2 project  It helped me   Here is the link  http   codingthesmartway com using-bootstrap-with-angular

User · Answer

I had the same question and found this article with a really clean solution   http   leon radley se 2017 01 angular-cli-and-bootstrap-4   Here are the instructions  but with my simplified solution   Install Bootstrap 4  instructions    npm install --save bootstrap 4 0 0-alpha 6   If needed  rename your src styles css to styles scss and update  angular-cli json to reflect the change    styles        styles scss       Then add this line to styles scss    import   bootstrap scss bootstrap

User · Answer

add the following lines in your html page   lt script src  https   cdnjs cloudflare com ajax libs ng2-bootstrap x x x ng2-bootstrap min js  gt  lt  script gt    lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet  gt

User · Answer

just check your package json file and add dependencies for bootstrap   dependencies          bootstrap     3 3 7       then add below code on  angular-cli json file     styles          styles css           node modules bootstrap dist css bootstrap css         Finally you just update your npm locally by using terminal     npm update

User · Answer

Another very good alternative is to use the skeleton Angular 2 4   Bootstrap 4  1  Download ZIP and extract zip folder  2  ng serve

User · Answer

You can try to use Prettyfox UI library http   ng prettyfox org  This library use bootstrap 4 styles and not need jquery

User · Answer

My recommendation would be instead of declaring it in the json stylus to put it in the scss so that everything is compiled and in one place   1 install bootstrap with npm   npm install bootstrap   2  Declare bootstrap npm in the css with our styles  Create  bootstrap-custom scss        Required    import  bootstrap-custom-required          Optional    import   bootstrap scss root      import   bootstrap scss grid      import   bootstrap scss tables                           3  Within the styles scss we insert   import  bootstrap-custom     so we will have all our core compiled and in one place

[angular] How to use Bootstrap in an Angular project?

Examples related to angular

Examples related to twitter-bootstrap

Examples related to typescript

Examples related to twitter-bootstrap-3