How to use bootstrap 4 in angular 2?

Question

I'm building an angular 2 app written in typescript. It would use the bootstrap 4 framework in combination with some custom theming, is this possible?

The "ng2-bootstrap" npm package is not working as it doesn't allow me to use the bootstrap css classes, instead it provides custom components. (http://github.com/valor-software/ng2-bootstrap)

In my angular 2 project I'm using sass, would it be possible to build bootstrap 4 from source as it is also using sass for styling?

Answer 1

ng add has been introduced with Angular 6. To install Bootstrap 4 (ng-bootstrap 2.0.0)

ng add @ng-bootstrap/schematics

Don't forget to restart your app with ng serve.

Answer 2

In angular 6 dont use npm i bootstrap@next --save may it would work but sometimes it would not better to add these:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>

Answer 3

Adding Bootstrap using Angular CLI:

step 1. npm i bootstrap@latest --save 
step 2. open angular.json and then add bootstrap:
 "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.scss"
    ]
step 3. restart the server to see the changes
        ng serve 

Answer 4

Angular v6 Onwards Bootstrap v4 and SCSS

This works fine with angular 7 scss enabled project

Run following commands for installing bootstrap, jQuery, and popper.js

npm install --save bootstrap jquery popper.js

jQuery, and popper.js are prerequisites for running bootstrap4 (refer https://getbootstrap.com for more information.)

Go to your angular.json file inside root folder. Edit

architect -> build -> options -> scripts

node as follows

 "scripts": [
              "./node_modules/jquery/dist/jquery.slim.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

This will enable javascript functions of bootstrap on your project.

Than go to src->styles.scss file and add following line

@import '~bootstrap/scss/bootstrap';

Answer 5

To use any visual library that needs JQuery just do the following:

• Add the library css in the index;
• Add the jquery js file to index;
• Add the library js files in the index;
• Install the library definition files (d.ts);
• Install jquery definitions files (d.ts);

If the library doesn't have definition files you could:

• Create the definition yourself;
• Create a global any variable with the same name of the library object, just to not get compiler errors;
• Use with errors (this is the worst option);

Now you can use the library inside Typescript;

Answer 6

The options above will work, however I use this approach via NPM:

1. Navigate to: Bootstrap 4 and retrieve the npm command

2. Run the NPM command obtained from step 1 in your project i.e

   npm install bootstrap@4.0.0-alpha.5 --save

3. After installing the above dependency run the following npm command which will install the bootstrap module npm install --save @ng-bootstrap/ng-bootstrap You can read more about this here

4. Add the following import into app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; and add NgbModule to the imports

5. Your app module will look like this:

   import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
   
   @NgModule({
      declarations: [
      AppComponent,
      WeatherComponent
   ],
     imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
     NgbModule.forRoot(), // Add Bootstrap module here.
   ],
     providers: [],
     bootstrap: [AppComponent]
   })
   
   export class AppModule { }
   

6. Open angular-cli.json and insert a new entry into the styles array :

   "styles": [
     "styles.css",
      "../node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],
   

7. Open src/app/app.component.html and add

   <alert type="success">hello</alert>
   

   or if you would like to use ng alert then place the following on your app.component.html page

   <ngb-alert [dismissible]="true">I'm a dismissible alert :) </ngb-alert>
   

8. Now run your project and you should see the bootstrap alert message in the browser.

NOTE: You can read more about ng Components here