Angular 4: ¿Cómo incluir Bootstrap?

Soy un desarrollador de backend y estoy jugando con Angular4. Así que hice este tutorial de instalación: https://www.youtube.com/watch?v=cdlbFEsAGXo.

Teniendo en cuenta esto, ¿cómo puedo añadir bootstrap a la aplicación para que pudiera utilizar la clase "container-fluid" o "col-md-6" y cosas por el estilo?

npm install --save bootstrap

Después, dentro de angular-cli.json (dentro de la carpeta raíz del proyecto), busca styles y añade el archivo css de bootstrap así:

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

Actualización:
en angular 6+ angular-cli.json se ha cambiado a angular.json.

Comentarios (8)

En Angular4 al tratar con el sistema @types, debes hacer lo siguiente,

Hacer,

1) npm install --save @types/jquery
2) npm install --save @types/bootstrap

tsconfig.json

busca el array types y añade las entradas jquery y bootstrap,

"types": [
      "jquery",
      "bootstrap",  
      "node"
]

Index.html

en la sección head añadir las siguientes entradas,


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

Y empezar a utilizar jquery y bootstrap ambos.

Comentarios (3)

Ejecute el siguiente comando en su proyecto, es decir npm install bootstrap@4.0.0-alpha.5 --save

Después de instalar la dependencia anterior ejecute el siguiente comando npm que instalará el módulo bootstrap npm install --save @ng-bootstrap/ng-bootstrap

Comprueba esto como referencia - https://github.com/ng-bootstrap/ng-bootstrap

Añade la siguiente importación en app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; y añade NgbModule a las importaciones

En su stye.css @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Comentarios (0)