How to add bootstrap in angular 6 project? [duplicate]

Asked
Active3 hr before
Viewed126 times

8 Answers

projectangularbootstrap
90%

The styles and scripts options in your angular.json configuration now allow to reference a package directly:,afterwards, inside angular.json (previously .angular-cli.json) inside the project's root folder, find styles and add the bootstrap css file like this:,Join Stack Overflow to learn, share knowledge, and build your career.

before: "styles": ["../node_modules/bootstrap/dist/css/bootstrap.css"]
after: "styles": ["bootstrap/dist/css/bootstrap.css"]

          "builder": "@angular-devkit/build-angular:browser",
          "options": {
             "outputPath": "dist/ng6",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
                "src/favicon.ico",
                "src/assets"
             ],
             "styles": [
                "src/styles.css", "bootstrap/dist/css/bootstrap.min.css"

             ],
             "scripts": [
                "jquery/dist/jquery.min.js",
                "bootstrap/dist/js/bootstrap.min.js"
             ]
          },

Each CLI workspace has projects, each project has targets, and each target can have configurations.Docs

. {
   "projects": {
      "my-project-name": {
         "projectType": "application",
         "architect": {
            "build": {
               "configurations": {
                  "production": {},
                  "demo": {},
                  "staging": {},
               }
            },
            "serve": {},
            "extract-i18n": {},
            "test": {},
         }
      },
      "my-project-name-e2e": {}
   },
}

In .angular-cli.json file Path was "../node_modules/"
In angular.json it is "node_modules/"

 "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
       "outputPath": "dist/ng6",
       "index": "src/index.html",
       "main": "src/main.ts",
       "polyfills": "src/polyfills.ts",
       "tsConfig": "src/tsconfig.app.json",
       "assets": [
          "src/favicon.ico",
          "src/assets"
       ],
       "styles": [
          "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css"

       ],
       "scripts": ["node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
       ]
    },

the <link> element at the end of the head section to include the Bootstrap CSS file
a <script> element to include jQuery at the bottom of the body section
a <script> element to include Popper.js at the bottom of the body section
a <script> element to include the Bootstrap JavaScript file at the bottom of the body section

  <!doctype html>
  <html>

  <head>
     <meta charset="utf-8">
     <title>Angular</title>
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>

  <body>
     <app-root>Loading...</app-root>
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>

  </html>

OPTION-4
ng-bootstrap It contains a set of native Angular directives based on Bootstrap’s markup and CSS. As a result, it's not dependent on jQuery or Bootstrap’s JavaScript

npm install--save @ng - bootstrap / ng - bootstrap

After Installation import it in your root module and register it in @NgModule imports` array

import {
   NgbModule
} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
   declarations: [AppComponent, ...],
   imports: [NgbModule.forRoot(), ...],
   bootstrap: [AppComponent]
})

NOTE
ng-bootstrap requires Bootstrap's 4 css to be added in your project. you need to Install it explicitly via:
npm install bootstrap@4 --save In your angular.json add the file paths to the styles array in under build target

   "styles": [
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],
load more v
88%

Pingback: Use Bootstrap In Angular 7 - Angular + Bootstrap 4 Starter - Wdstack - Medium ,Next, open angular.json file and add bootstrap file path to the styles section. Like,, A clean way to add Swagger to ASP.NET Core application

First, let’s create an Angular 6 app using the following command.

ng new Angular6TestApp
load more v
72%

6: Bootstrap 4 JavaScript Components with ng-bootstrap (Option 2),4: Bootstrap JavaScript Components with ngx-bootstrap (Option 1)4.1: Adding the required Bootstrap modules in app.module.ts,Source code + live demo + Stackblitz

ng new angular - bootstrap - example
load more v
65%

Adding Bootstrap CSS FileAdd Bootstrap using the CDNInstall the bootstrap packageCopy CSS file Local folderAssets folderOther folders,Open the angular.json file and locate the projects -> Bootstrap-example (our project name) -> architect -> build -> styles node.,Add Bootstrap using the CDN

In this guide, we will show you how to add Bootstrap to the Angular app. This tutorial uses Bootstrap 4 & Angular 9. We will show you how to install the bootstrap CSS. We also show you how to add ng-bootstrap & ngx-bootstrap two most popular Angular implementation of the Bootstrap using the Angular CLI commands.

ng - bootstrap

In this guide, we will show you how to add Bootstrap to the Angular app. This tutorial uses Bootstrap 4 & Angular 9. We will show you how to install the bootstrap CSS. We also show you how to add ng-bootstrap & ngx-bootstrap two most popular Angular implementation of the Bootstrap using the Angular CLI commands.

ngx - bootstrap
load more v
75%

Method 3: Adding bootstrap CSS files to your project (Using CSS import ).,Method 2: Using CDN (Copy and Paste method).,Method 1: Using Angular CLI (npm install).

You can direct add bootstrap folders to your asset directory in your angular project and reference the folder directly into your style.css or style.scss using

@import url("bootstrap.min.css");
load more v
40%

Check out how to add Bootstrap to an Angular 6 project for options on how to integrate Bootstrap with Angular.,Let’s start by installing the latest version of Angular CLI. In your terminal, run the following command:,In this tutorial, we’ve seen how to create a simple Angular application with a Bootstrap interface. You can find the complete source code on GitHub and see the live example here.

Let’s start by installing the latest version of Angular CLI. In your terminal, run the following command:

$ npm install - g @angular / cli

At the time writing, v7.0.3 of Angular CLI is installed. If you have the CLI already installed, you can make sure you have the latest version by using this command:

$ ng--version

Once you have Angular CLI installed, let’s use it to generate an Angular 7 project by running the following command:

$ ng new angular - bootstrap - demo

First, navigate inside your project’s root folder:

$ cd angular - bootstrap - demo

Next, install Bootstrap 4 and jQuery from npm:

$ npm install--save bootstrap jquery
"architect": {
   "build": {
      [...],
      "styles": [
         "src/styles.css",
         "node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [
         "node_modules/jquery/dist/jquery.min.js",
         "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ]
   },

In your terminal, run the following command to generate a service:

$ ng generate service data
import {
   Injectable
} from '@angular/core';

@Injectable({
   providedIn: 'root'
})
export class DataService {

   contacts = [{
         id: 1,
         name: "Contact 001",
         description: "Contact 001 des",
         email: "c001@email.com"
      },
      {
         id: 2,
         name: "Contact 002",
         description: "Contact 002 des",
         email: "c002@email.com"
      },
      {
         id: 3,
         name: "Contact 003",
         description: "Contact 003 des",
         email: "c003@email.com"
      },
      {
         id: 4,
         name: "Contact 004",
         description: "Contact 004 des",
         email: "c004@email.com"
      }
   ];

   constructor() {}

   public getContacts(): Array < {
      id,
      name,
      description,
      email
   } > {
      return this.contacts;
   }
   public createContact(contact: {
      id,
      name,
      description,
      email
   }) {
      this.contacts.push(contact);
   }
}

After creating the data service, next we need to create some components for our application. In your terminal, run:

$ ng generate component home
$ ng generate component contact - create
$ ng generate component contact - list
import {
   NgModule
} from '@angular/core';
import {
   Routes,
   RouterModule
} from '@angular/router';
import {
   ContactListComponent
} from './contact-list/contact-list.component';
import {
   ContactCreateComponent
} from './contact-create/contact-create.component';
import {
   HomeComponent
} from './home/home.component';

const routes: Routes = [{
      path: "",
      pathMatch: "full",
      redirectTo: "home"
   },
   {
      path: "home",
      component: HomeComponent
   },
   {
      path: "contact-create",
      component: ContactCreateComponent
   },
   {
      path: "contact-list",
      component: ContactListComponent
   }
];

@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
export class AppRoutingModule {}

Next, let’s create the header and footer components:

$ ng generate component header
$ ng generate component footer
<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
   <a class="navbar-brand" href="#">Angular Bootstrap Demo</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">

         <li class="nav-item">
            <a class="nav-link" routerLink="/home">Home</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" routerLink="/contact-list">Contacts</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" routerLink="/contact-create">Create</a>
         </li>

      </ul>
   </div>
</nav>

Next, open the src/app/header/header.component.css file and add:

.nav - item {
   padding: 2 px;
   margin - left: 7 px;
}
<footer>
   <p class="text-xs-center">© Copyright 2019. All rights reserved.</p>
</footer>

Open the src/app/footer/footer.component.css file and add:

footer {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   padding: 1 rem;
   text - align: center;
}

Next, open the src/app/app.component.html file and replace its contents with the following:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
<div class="jumbotron" style="background-color: #fff; height: calc(95vh);">
   <h1>Angular Bootstrap Demo</h1>
   <p class="lead">
      This demo shows how to integrate Bootstrap 4 with Angular 7
   </p>
   <a class="btn btn-lg btn-primary" href="" role="button">View tutorial</a>
</div>

First, open the src/app/contact-list/contact-list.component.ts file and inject the data service then call the getContacts() method to get data when the component is initialized:

import {
   Component,
   OnInit
} from '@angular/core';
import {
   DataService
} from '../data.service';

@Component({
   selector: 'app-contact-list',
   templateUrl: './contact-list.component.html',
   styleUrls: ['./contact-list.component.css']
})
export class ContactListComponent implements OnInit {

   contacts;
   selectedContact;

   constructor(public dataService: DataService) {}

   ngOnInit() {
      this.contacts = this.dataService.getContacts();
   }
   public selectContact(contact) {
      this.selectedContact = contact;
   }
}
<div class="container" style="margin-top: 70px;">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let contact of contacts">

        <td>{{ contact.id }}</td>
        <td> {{ contact.name }}</td>
        <td> {{ contact.email }}</td>
        <td>
          <button class="btn btn-primary" (click)="selectContact(contact)"> Show details</button>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="card text-center" *ngIf="selectedContact">
      <div class="card-header">
        # {{selectedContact.id}}
      </div>
      <div class="card-block">
        <h4 class="card-title">{{selectedContact.name}}</h4>
        <p class="card-text">
          {{selectedContact.description}}
        </p>    
      </div>

    </div>
</div>

Let’s now add a form to our contact-create component. First, we need to import the FormsModule in our main application module. Open the src/app/app.module.ts file, import FormsModule from @angular/forms, and add it to the imports array:

import {
   BrowserModule
} from '@angular/platform-browser';
import {
   NgModule
} from '@angular/core';
import {
   AppRoutingModule
} from './app-routing.module';
import {
   FormsModule
} from '@angular/forms';

/* ... */

@NgModule({
   declarations: [
      /* ... */
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule {}
import {
   Component,
   OnInit
} from '@angular/core';
import {
   DataService
} from '../data.service';

@Component({
   selector: 'app-contact-create',
   templateUrl: './contact-create.component.html',
   styleUrls: ['./contact-create.component.css']
})
export class ContactCreateComponent implements OnInit {

   contact: {
      id,
      name,
      description,
      email
   } = {
      id: null,
      name: "",
      description: "",
      email: ""
   };

   constructor(public dataService: DataService) {}

   ngOnInit() {}

   createContact() {
      console.log(this.contact);
      this.dataService.createContact(this.contact);
      this.contact = {
         id: null,
         name: "",
         description: "",
         email: ""
      };

   }
}
<div class="container" style="margin-top: 70px;">

   <div class="row">

      <div class="col-sm-8 offset-sm-2">

         <div>
            <form>
               <div class="form-group">
                  <label for="id">ID</label>
                  <input [(ngModel)]="contact.id" type="text" name="id" class="form-control" id="id" aria-describedby="idHelp" placeholder="Enter ID">
                  <small id="idHelp" class="form-text text-muted">Enter your contact’s ID</small>

                  <label for="name">Contact Name</label>
                  <input [(ngModel)]="contact.name" type="text" name="name" class="form-control" id="name" aria-describedby="nameHelp" placeholder="Enter your name">
                  <small id="nameHelp" class="form-text text-muted">Enter your contact’s name</small>

                  <label for="email">Contact Email</label>
                  <input [(ngModel)]="contact.email" type="text" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter your email">
                  <small id="nameHelp" class="form-text text-muted">Enter your contact’s email</small>

                  <label for="description">Contact Description</label>
                  <textarea [(ngModel)]="contact.description" name="description" class="form-control" id="description" aria-describedby="descHelp">
                      </textarea>
                  <small id="descHelp" class="form-text text-muted">Enter your contact’s description</small>

               </div>
            </form>
            <button class="btn btn-primary" (click)="createContact()">Create contact</button>
         </div>
      </div>
   </div>
</div>

At this step, let’s run the application and see if everything works as expected. Head over to your terminal, make sure you are in the root folder of your project then run the following command:

$ ng serve
load more v
22%

In this article we will learn how to add bootstrap in angular 6 project.We will learn from the beginning,how we add bootstrap and use in our application.Bootstrap is used to create responsive web applications.,Bootstrap In Angular 6 Project,In this article we will learn how to add Bootstrap in Angular 6 projects. We will learn from the beginning how we add Bootstrap and use it in our application. Bootstrap is used to create responsive web applications.

 Pretag team - issue, fix, solve, resolve
60%

Having installed it successfully you can now use Angular CLI to initiate a new project in the following way:,Another way to add Bootstrap to your Angular project is to install it into your project folder by using NPM.,Fully understand the architecture behind an Angular 2 application and how to use it

Now you index.html file should look like the following:

<!doctype html>
<html>

<head>
   <meta charset="utf-8">
   <title>Angular Bootstrap Demo</title>
   <base href="/">

   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
   <app-root>Loading...</app-root>
   <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>
load more v

Other "project-angular" queries related to "How to add bootstrap in angular 6 project? [duplicate]"