Configurando e implementando Bootstrap en nuestro proyecto

Resumen

Instalaremos Bootstrap en nuestro proyecto usando

npm install bootstrap

Ignacio Emmanuel Mancilla Olivares

student•

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

student•

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

student•

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

npm install bootstrap@3

Fran Delgado

student•

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

student•

gracias!

Andrea Da Silva Pinto

student•

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

Que hago? :c

Teofilo Rosales Gama

student•

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

Juan Sebastian Avila

student•

Muchas gracias!

angel roacho

student•

gracias

ARTURO CASTRO RAMÍREZ

student•

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

student•

Mucha gracias correcto

Alejandro Zariz

student•

Es cierto! Muchas gracias

David Daniel Castillo Nava

student•

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

student•

gracias :)

David Flores Medrano

student•

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

student•

mil gracias!!

Azlain Saavedra

student•

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

student•

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

student•

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

Felipe Moreno

student•

¿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

student•

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

student•

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

student•

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

student•

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

student•

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

Armando Perdomo

student•

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

student•

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

student•

A 01/Octubre/2018

npm install bootstrap@3 --save

funciona correctamente

Luis Fernando Barajas Cortes

student•

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

Israel Urbina

student•

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

student•

Gracias

Jesús Miguel Moreno Plasencia

student•

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

student•

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

student•

😮gracias por el aporte, anotado. 📝

Jesús Miguel Moreno Plasencia

student•

¿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

student•

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

student•

Muchas gracias. Si, esa era mi pregunta. Ahora ya lo sé para lo sucesivo. Un saludo.