Cómo Instalar Bootstrap en Angular

Cómo Instalar Bootstrap en Angular

Antes de comenzar con las lecciones para aprender a desarrollar en Angular, creo que es conveniente hacer una breve pausa para aprender a instalar Bootstrap en nuestros proyectos en Angular.

Bootstrap se trata de un Framework de CSS que nos ayudará a crear buenos diseños de forma sencilla, la verdad es que es una herramienta muy útil y por ello he decidido primero hacer esta lección sobre como añadirla a nuestros proyectos, ya que mas adelante la utilizaremos.

Te traigo un total de tres métodos distintos para añadir Bootstrap a tu proyecto de Angular, aunque la verdad es que yo te recomiendo que utilices el último método, que sería la mejor práctica, los demás son un poco más cutrones, en especial el primer método.

Bootstrap CDN

En primer método será utilizar la Bootstrap CDN, el método más rápido y sencillo, pero a su vez un método bastante cutre. Cargaremos todo el código de Booststrap desde el propio servidor de Bootstrap, lo que implica que si por algún motivo este está caído, nuestra página no cargará su Bootstrap y por ende se mostrará de mala manera.

Simplemente debes ir al índex.html de tu proyecto y añadir las siguientes lineas en el head de la página:


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Con esto estaremos cargando el Bootstrap CSS, el Bootstrap JS, Jquery y Popper, que es todo lo que necesitaremos tener en esta lección.

Instalando Boostrap a mano

El siguiente método es bastante correcto, diría que complemente correcto, pero la verdad es que quedará mucho más pulido el último método. De todos modos, ya te digo, si este te vale, este está ya muy bien.

Básicamente tenemos que descargarnos todas los ficheros de Bootstrap y subirlos a nuestro proyecto. Yo te recomiendo que los añadas en /assets/css y /assets/js, unos directorios que deberás crear para tener todo bien ordenado.

Una vez añadidos los ficheros en sus respectivos directorios, tendremos que llamarlos desde el siguiente fichero: angular.json, este es el fichero en el que añadiremos todas las librerías y demás que queramos en nuestro proyecto.

Ves a las siguientes lineas y haz lo siguiente:


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

"scripts": [
    "assets/js/jquery.js",
    "assets/js/popper.js",
    "assets/js/bootstrap.min.js"
    
]
},

Deberás introducir las direcciones correctas de tus ficheros instalados, deberían quedar más o menos así.

Instalar mediante NPM

El último método y el que sin duda supone la mejor práctica de todos. Instalaremos Bootstrap mediante NPM, lo que hará que lo tengamos todo disponible en la carpeta de note_modules.

Para hacerlo así tenemos que dirigirnos dentro del directorio de nuestro proyecto con la terminal y realizar este comando:

$ npm install bootstrap jquery popper.js

Con él instalaremos tanto Bootstrap, como Jquery como Popper.js

Esto hará que tengamos todo lo necesario en node_modules y tal y como hicimos en el anterior método, tendremos que llamar a nuestros ficheros, solo que ahora habrá que buscarlos en node_modules. La cosa debería quedar más o menos así.

Recuerda que debemos editar el angular.json:


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

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

Asegúrate de que estas son todas las direcciones donde se te han instalado estos ficheros, tendrás que buscarlos en /node_modules. Vigila también con no equivocarte al escribir absolutamente nada, de otro modo te petará toda la página.

Al tener todo listo, si accedes a http://localhost/4200 o donde sea que tengas alojado el server de Angular verás como ha cambiado un poco el estilo de la página. Esto significa que todo está correcto y que Bootstrap ya está activo en el sitio, ¡enhorabuena!

Más adelante utilizaremos este framework para añadir componentes a nuestra página, ya verás lo bien que nos vendrá.

¡Y eso es todo! ¿Has conseguido instalar Bootstrap correctamente en tu proyecto de Angular? ¿Cuál de los tres métodos has utilizado? ¿Conoces algún otro método? ¿Cuál de los tres prefieres? ¡Deja tu comentario!

Tags:

Leave a Reply