Cfrgtkky

Bootstrap4 alpha for Angular2 CLI (also works for Angular4 CLI)

If you are using the angular2 cli/angular 4 cli do 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 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";

If you are using scss, make sure you change your default styling to scss in .angular-cli.json:

  "defaults": {

    "styleExt": "scss",

    "component": {}

  }

Bootstrap JS Components

For Bootstrap JS components to work you will still need to import bootstrap.js into .angular-cli.json under scripts (this should happen automatically):

...     

"scripts": ["../node_modules/jquery/dist/jquery.js",

                  "../node_modules/tether/dist/js/tether.js",

                  "../node_modules/bootstrap/dist/js/bootstrap.js"],

...

Update 2017/09/13: Boostrap 4 Beta is now using popper.js instead of tether.js. So depending on which version you are using import either tether.js (alpha) or popper.js (beta) in your scripts. Thanks for the heads up @MinorThreat

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

I would suggest:

• Simply including a link to the Bootstrap's CSS file in your index.html page


• Using ng-bootstrap - a dedicated set of Angular 2 directives for parts where dynamic behaviour is needed. This way you don't need to import / setup jQuery nor care about Bootstrap's JavaScript.

You can use npm for installing the latest bootstrap version. This can be done using the command:

npm install bootstrap@4.0.0-beta

And after this you might have to import bootstrap.css into your main css file. Which will be styles.css, if you are using angular-cli.

@import '~bootstrap/dist/css/bootstrap.min.css';

If you want to know more please use the link: http://technobytz.com/install-bootstrap-4-using-npm.html

First goto your project directory and follow the below given steps.

1) npm install --save @ng-bootstrap/ng-bootstrap (run this command in node js command prompt)

2)npm install bootstrap@4.0.0-alpha.6 (next run this)

3)import {NgbModule} from '@ng-bootstrap/ng-bootstrap'(write this in app module.ts)

4) If Module is your root module include this

`@NgModule({

 declarations: [AppComponent, ...],

 imports: [NgbModule.forRoot(), ...],

 bootstrap: [AppComponent]

})`



    (or)

If not root Module

`@NgModule({

 declarations: [OtherComponent, ...],

 imports: [NgbModule, ...]

})`

5) Write this in system.config.js

`map: {

'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-

bootstrap/bundles/ng-bootstrap.js',

}`

6) Add in Index.html

`<script src="../node_modules/jquery/dist/jquery.min.js"></script>

 <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

 <link rel="stylesheet" type="text/css" 

 href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />`

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.

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>

In angular 6: First install bootstrap in project directory npm install bootstrap. If you look at the Angular.JSON file you will see that styles.css is already referenced so in styles.css just add @import "~bootstrap/dist/css/bootstrap.css";

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';