CODEWITHSUNDEEP
twitter-bootstrapangulartypescripttwitter-bootstrap-3
Pedro Romano Barbosa
Pedro Romano Barbosa

Reputation: 647

Import Bootstrap styles in Angular 2

How do I import bootstrap into my angular 2 project? I have the bootstrap package in the nod_modules directory. I do this in a component file:

import { Component } from '@angular/core';
import 'bootstrap';

But the page gets stuck in the loading...

Upvotes: 0

Views: 824

Answers (2)

Darryl Mendonez
Darryl Mendonez

Reputation: 1171

For those that need a solution for Angular 6+:

  1. Install bootstrap via npm npm install bootstrap jquery popper.js
  2. In your angular.json find your "styles" and "scripts" array and add the paths found in the example below:
  3. Restart your local server and refresh your browser. ng serve

Example:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.css"
],
"scripts": [
   "node_modules/jquery/dist/jquery.min.js",
   "node_modules/popper.js/dist/popper.min.js",
   "node_modules/bootstrap/dist/js/bootstrap.min.js"
],

Upvotes: 0

migueref
migueref

Reputation: 302

Put this lines in you main html to install:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

If you want use it in your component:

import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';

This is de complete documentation for ng2-bootstrap: https://github.com/valor-software/ng2-bootstrap

Upvotes: 1

Related Questions