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:

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.«.

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

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.