Alternative Methods for Adding Bootstrap to Angular CLI Projects

Install Bootstrap and Angular Bootstrap:

• Use npm or yarn to install Bootstrap and Angular Bootstrap (ng-bootstrap) in your Angular project:

npm install bootstrap ng-bootstrap

Import Bootstrap CSS and JavaScript:

• In your angular.json file, under the styles array, add the path to Bootstrap's CSS file:

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

• In the same file, under the scripts array, add the path to Bootstrap's JavaScript file:

"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

Import Angular Bootstrap Modules:

• In your app.module.ts file, import the necessary Angular Bootstrap modules:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';   
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,   
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule    { }

Use Bootstrap Components:

• You can now use Bootstrap components in your Angular templates. For example, to add a button:

<button type="button" class="btn btn-primary">Primary button</button>

Additional Notes:

• You can customize Bootstrap's appearance using CSS classes and variables.
• Angular Bootstrap provides additional components and features for Angular applications.
• Refer to the official Bootstrap and Angular Bootstrap documentation for more details and examples.

How to add bootstrap to an angular-cli project:

// angular.json
"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"   
]

Explanation:

• styles array: This array specifies the CSS files that will be included in your Angular project.
  • The first entry, src/styles.css, is your project's main stylesheet.
  • The second entry, node_modules/bootstrap/dist/css/bootstrap.min.css, references the Bootstrap CSS file.
• scripts array: This array specifies the JavaScript files that will be included in your Angular project.

Add Bootstrap to Angular CLI Project:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';   
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,   
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule    { }

• import statements:
  • import { NgModule } from '@angular/core';: Imports the NgModule class from the Angular core.
  • import { BrowserModule } from '@angular/platform-browser';: Imports the BrowserModule from the Angular platform browser.
  • import { AppComponent } from './app.component';: Imports your main component.
  • import { NgbModule } from '@ng-bootstrap/ng-bootstrap';: Imports the NgbModule from Angular Bootstrap.
• @NgModule decorator:
  • Defines the metadata for the module.
  • declarations: Specifies the components that belong to this module.
  • imports: Specifies the modules that this module depends on.
  • providers: Specifies the services that this module provides.
  • bootstrap: Specifies the component that will be bootstrapped when the application starts.

Example usage of Bootstrap components:

<button type="button" class="btn btn-primary">Primary button</button>

• This HTML code creates a Bootstrap button with the class btn btn-primary, which gives it a primary color and style.

Alternative Methods for Adding Bootstrap to Angular CLI Projects

While the standard approach involves using npm or yarn to install Bootstrap and Angular Bootstrap, there are alternative methods that you can consider:

Using a CDN (Content Delivery Network):

• Pros:
  • Quick and easy to implement.
  • No need for additional package management steps.
• Cons:
  • Less control over the Bootstrap version.
  • Potential performance issues if your network has slow connections to the CDN.
• Example:
  • Add the following script tag to your index.html file:

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C7zjsC34HBQX/keXPu/bO7H5i13Cv1DNQf6qKyp6GKm0w+L6ZqFG5l7F24000006" crossorigin="anonymous"></script>
  

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3870-8383-4493-9393-7493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-8493-849