Configurando e implementando Bootstrap en nuestro proyecto

Faltó agregar el --save cuando se instaló el npm para que se guarde en el package.json en su sección de dependencias, a parte puede que varios tengan problemas ya que de esa manera no se trae la versión mas actual de Bootsrap. Sería mejor algo así.

npm install bootstrap@4.0.0-beta --save

Saludos

Ignacio Emmanuel Mancilla Olivares

Nota

Esa es la versión Beta, puede traer algunos conflictos para proyectos muy grandes ya que no está en su versión estable.

Juan Gonzalez González

mejor usar la versión 3 hasta que 4 deje de estar beta

npm install bootstrap@3

Fran Delgado

Si alguien quiere usar ya bootstrap 4 (como yo he hecho):

Por una parte, ejecuta en la terminal (en la raíz de tu proyecto):

npm install bootstrap --save
npm install jquery --save
npm install popper.js --save

Y ya dentro de tu IDE, en el directorio raíz del proyecto, editamos .angular-cli.json:

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

Y con esto ya tenéis funcionando boostrap 4 tanto a nivel de CSS como a nivel de javascript.

Mariano Villarreal

gracias!

Andrea Da Silva Pinto

Cuando genero un proyecto con ng new nombreProyecto ya no me genera el archivo angular-cli.json

Que hago? :c

Teofilo Rosales Gama

Logre solucionarlo aqui les dejo como lo logre
https://platzi.com/angular/tutoriales/angular-6-bootstrap-4/

Juan Sebastian Avila

Muchas gracias!

angel roacho

gracias

ARTURO CASTRO RAMÍREZ

En versiones actuales al día de hoy NO se encuentra como .angular-cli.json esta como angular.json y la linea se agrega es sin los dos puntos es directo asi: "node_modules/bootstrap/dist/css/bootstrap.min.css"

Joseph Monsalve

Mucha gracias correcto

Alejandro Zariz

Es cierto! Muchas gracias

David Daniel Castillo Nava

Yo lo estoy haciendo en Angular 6 el archivo de no se llama como en el video .angular-cli.json ahora se llama angular.json. Ademas la ruta se puede agregar de la siguiente manera.

En el key

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

Felipe Vidal

gracias :)

David Flores Medrano

con la version 4 de bootstrap para seguirle el paso el profe y poner el navbar oscuro se le cambia así:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

Estefania Janet Rodriguez

mil gracias!!

Azlain Saavedra

A mi me dio error el navbar no se veia bien paracia un problema con los estilo css y lo solucione eliminando la dependencia de bootstrap recomendada por eduardo y use ngx-bootstrap

npm remove bootstrap --save

npm install ngx-boostrap --save

Yangetze González

Company_admin

Pero si uso ngx debo agregar algo más en el cli-angular? o en otro lado?

Yangetze González

Company_admin

Logre solucionar instalando asì

npm install ngx-bootstrap and bootstrap@3 -- save

Luego tambien agregué en el index.html que està en la raìz el link de bootstrap

Rodolfo Sáenz

Mi estructura de directorios no tiene el archivo .angular-cli.json sin embrago si tiene angular.json fuera de src. Ahí añadí la referencia al archivo css:

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

Luis Pena

["Node_modules/bootstrap/dist/css/bootstrap.min.css"] a mi me funciono asi. Cuando lo hacia con .. Me dava problemas el serve

Felipe Moreno

¿no es un poco contradictorio usar angular (que es javascript casi puro) y bootstrap como su framework de estilos sabiendo que muchas de sus funcionalidades dependen de jquery, caso puntual el navbar-collapse del navbar para hacer el que el menú tipo ‘hamburguesa’ se expanda o no en una vista móvil?

Miguel Ángel Soto Ramírez

Hola, no puedo visualizar de forma correcta el Navbar, ya probé instalando bootstrap de varios formas ¿qué puedo hacer?

Diego Forero

Team Platzi

Revisa la documentación de bootstrap ya que como aun esta en beta puede haber cambiado algo de la configuración del navbar.

Mauro Gomez

no sé si fue tu caso y ya hace mucho tiempo, pero estoy tenía inconvenientes con el menú dropdown.

solucionando incluyendo los scripts al código
.angular-cli.json
"scripts": [
"…/node_modules/jquery/dist/jquery.slim.min.js",
"…/node_modules/popper.js/dist/umd/popper.js",
"…/node_modules/bootstrap/dist/js/bootstrap.min.js"
],

Andrez Jhair Segovia Cruz

Intente probar la version bootstrap v4.0.0-beta.2 pero al parecer aún tiene problemas con la integración en Angular 4.

También, intente usar la misma versión de bootstrap, implementando ng-bootstrap, pero tampoco me funciona. Específicamente falla al intentar agregar un navbar.

Si alguien encuentra la solución a la integración de Bootstrap 4 con Angular 4, creo que a varias personas nos sería de gran utilidad que compartieran dicha solución.

Para solucionar este problema, implemente la versión de bootstrap v3.3.7, la cual me ha funcionado sin ningún inconveniente.

Andrez Jhair Segovia Cruz

Para poder implementar bootstrap 4 con Angular 4, necesitamos instalar las siguientes librerías: jquery v3.2.1, poppe.js v1.12.3 y bootstrap v4.0.0-beta.2

npm install jquery@3.2.1 popper.js@1.12.3 bootstrap@4.0.0-beta.2 --save

Y después debemos actulizar el archivo .angular-cli.json, agregando las librerías instaladas

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

Alexis Antonio Moraga Gallardo

Gracias por Compartir. Gracias a esto logre solucionar los problemas que tenia con el collapse en mi navbar

Armando Perdomo

Mucho cuidado al instalar dependencias, npm sabe el arbol de dependencias al momento de descargar e incluir al proyecto, pero mas no las incluye de manera automática, sino que nos advierte con un WARN ‘you most install dependencies yourself’

En este caso instalando boostrap 4 me encuentro con que son requeridas ajv, jquery y popperjs

eso lo resolvemos haciendo npm install correspondiente con las versiones que nos recomienda

npm install ajv@6.0.0 --save
npm install jquery@1.9.1 --save
npm install popper.js@1.14.3 --save

obviando las opcionales…

_En su defecto podemos usar otras librerías ya hechas con angular?

Si podemos pero en mi opinión es preferible trabajar con las oficiales_

Armando Perdomo

npm también nos permite ver las vulnerabilidades, npm audit para ver las vulnerabilidades y por tu propia cuenta puedes resolverlas o usar npm audit fix

carlos Alberto Bedoya Ramirez

A 01/Octubre/2018

npm install bootstrap@3 --save

funciona correctamente

Luis Fernando Barajas Cortes

En las versiones mas recientes se llama "angular.json" no .angular-cli.json

Israel Urbina

como ya mencionaron ahora el archivo .agular-cli ahora se encuentra como angular.json y tambien igualmente si instalan la ultima version de boostrap no funcionara el navbar con las clases ya que cambiaron aqui dejo el codigo con las clases actualizadas para el menu :)

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">PlatziSqueare</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Inicio <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contacto</a>
      </li>
    </ul>
  </div>
</nav>

Diego Servin Hamden

Gracias

Jesús Miguel Moreno Plasencia

Amigos en archivo angular.js raiz del proyecto, solo adjuntar bootstrap de la siguiente manera evitar el "../", aparece un error en la búsqueda del archivo

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

Alan Fermin

Por si acaso, he estado buscando y de angular 6 en adelante, el archivo que se utiliza es angular.json, ya que .angular-cli.json ya no existe en las nuevas versiones

Erik Elyager

😮gracias por el aporte, anotado. 📝

Jesús Miguel Moreno Plasencia

¿mismo problema?

+ bootstrap@4.4.1
updated 1 package and audited 18885 packages in 57.837s
found 2 high severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

Noelia Iglesias Martínez

Hola, yo he instalado angular cli con npm como se indica al principio del curso, ahora al instalar bootstrap y buscar el fichero angular-cli.json, no lo tengo así nombrado, sino que se llama angular.json pero el encabezado es igual que el del tutorial y funciona bien, lo que quiero saber es por qué me ha ocurrido esto. Un saludo.

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,```

Noelia Iglesias Martínez