• Saltar a la navegación principal
  • Saltar al contenido principal

CARLOSZR.COM

Mi blog personal, CarlosZR

  • Blog
  • Contacto
  • Curso de SwiftUI por CarlosZR

Curso Spring Boot y Angular / 30/03/2020

Instalar Bootstrap en Angular

Vamos a ver como instalar Bootstrap en Angular.

La primera forma de instalar Bootstrap en Angular es muy simple y poco eficaz para aplicaciones que no sean muy pequeñas.

Instalar Bootstrap en una página con Angular

Vamos a getbootstrap.com y clicamos en Download.

Copiamos el contenido de la siguiente imagen:

instalar bootstrap en angular
BoostrapCDN

Ahora nos vamos a nuestro proyecto, en este caso yo estoy usando Atom, y pegamos esas líneas en la página donde queremos usar Bootstrap. En este caso es «index.html».

El link lo ponemos entre las etiquetas «head». El scipt lo ponemos entre las etiquetas «body», justo antes del final del cierre. Recuerda lo que se nos comenta en la propia página de Bootstrap (traducido): «Si está utilizando nuestro JavaScript compilado, no olvide incluir versiones CDN de jQuery y Popper.js antes.«.

Instalar jQuery en Angular, instalar Popper en Angular
Bootstrap jQuery y Popper

Te pongo una captura de como queda finalmente mi página (arcivo index.html):

index.html en Angular con Bootstrap
index.html en Angular con Bootstrap

Ahora vamos a ver cómo instalar Bootstrap en un proyecto de Angular.

Instalar Bootstrap en un proyecto de Angular con Spring

Para mí es la mejor forma de instalar Bootstrap en un proyecto de Angular porque así tenemos Bootstrap en todo el proyecto de Angular. Nos olvidamos de tener que instalarlo página a página. Vamos a ver la mejor manera de instalar Bootstrap en nuestro proyecto. Primero nos descargamos los archivos bootstrap.min.css, bootstrap.min.js, popper.min.js y jquery-<version>.slim.min.js. Los archivos los instalamos poniendo las urls anteriores en la barra de navegación y damos enter. A continuación, seleccionamos descargar desde nuestro navegador, Firefox en mi caso.

Ahora creamos dos directorios dentro de /assets, uno para css y oto para js. Dentro de la carpeta css pegamos los archivos css y dentro de la carpeta js pegamos los archivos css.

A continuación modificamos el src para indicar la ruta. El código quedaría así:

<link rel="stylesheet" href="assets/css/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="assets/js/jquery-3.4.1.slim.min.js"></script>

<script src="assets/js/popper.min.js"></script>

<script src="assets/js/bootstrap.min.js"></script>

Pero no es la única forma. Otra forma es modificar el archivo .angular-cli.json (en versiones anteriores de Angular) o angular.json en versiones recientes. Ahí añadimos las rutas para styles y para css. El codigo del archivo entonces queda así:

    ],
            "styles": [
              "src/styles.css",
              "src/assets/css/bootstrap.min.css"
            ],
            "scripts": [
              "src/assets/js/jquery-3.4.1.slim.min.js",
              "src/assets/js/popper.min.js",
              "src/assets/js/bootstrap.min.js"]
          },

Sí, desde la versión 6 de Angular hay que añadir src/ a la ruta.

Ahora tenemos páginas más limpias, donde para cambia la versiónd e bootstrap de todas las páginas de un proyecto, simplemente cambiamos los archivos en las carpetas que hemos indicado y los ajustes necesarios que hemos visto en el archivo de configuración angular.json.

Instalando Bootstrap con npm

Vamos a ver cómo instalar Bootstrap utilizando el administrador de paquetes de node npm. Simplemente abrimos el terminal desde Atom y escribimos:

npm install bootstrap jquery popper.js --save

Ahora simplemente modificamos las rutas en nuestro archivo angular.json. Quedarían así:

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

Ya podemos eliminar de assets los archivos de css y javascript.

Hemos visto las diferentes alternativas que hay, elegiremos la que queramos.

Si te he ayudado o tienes alguna duda, puedes dejarme un comentario.

Publicado en: Curso Spring Boot y Angular Etiquetado como: bootstrap en angular

Interacciones con los lectores

Comentarios

  1. Fabián Bustos dice

    02/05/2022 a las 03:12

    Excelente aporte, muy bien detalladas las formas de agregar bootstrap.
    Yo lo hice pero tengo un problema a la hora de utilizar los scripts de java. Tengo que crear/agregar algún archivo .js o dónde agrego el código js para usarlo en un componente?
    Desde ya gracias y muy buen aporte!

    Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Carlos ZR

  • Sígueme en Twitter
  • Política de Cookies
  • Política de Privacidad
  • Aviso Legal

Utilizamos cookies para ofrecerte la mejor experiencia en nuestra web.

Puedes aprender más sobre qué cookies utilizamos o desactivarlas en los ajustes.

CARLOSZR.COM
Powered by  GDPR Cookie Compliance
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.