💻 ¿Cómo instalar Bootstrap en angular? [Guía 2022] | Crehana
Descubre cómo instalar Bootstrap en Angular y mejora el aspecto de tu página web

Descubre cómo instalar Bootstrap en Angular y mejora el aspecto de tu página web

Última actualización 12 de Octubre del 2021Tiempo de lectura: 7 min.

Susana Serrano

Instalar Bootstrap en Angular se presenta como un paso obligatorio para tener una página web de excelente calidad. 

Bootstrap ocupa el segundo lugar del framework de JavaScript más utilizado, con un 20,6% de los sitios web que utilizan dicha tecnología y, en la actualidad, es una de las alternativas más populares a la hora de desarrollar tanto sitios web como aplicaciones.

Además, Bootstrap es un framework poderoso para el desarrollo de aplicaciones front-end receptivas. Pero si aún esto no te convence para instalar Bootstrap en Angular, deja que te contemos más sobre este framework.

¿Qué es Bootstrap?

Bootstrap es un Framework Content Marketing, también conocido como Framework de gestión de contenido, que fue desarrollado por Twitter en 2010 para estandarizar las herramientas de la compañía.

Instalar Bootstrap en Angular es muy recomendable, ya que combina el potencial de varias tecnologías, como son CSS, JavaScript (JS) o JQuery, con el objetivo de estilizar los elementos de tus páginas HTML.

Del mismo modo, Bootstrap te ofrece los siguientes beneficios:

  • Proporciona interactividad en tu página, ofreciendo componentes que facilitan la comunicación con el usuario: menús de navegación, controles de página, barras de progreso, entre otros.
  • Te permite la creación de sitios y apps cien por ciento adaptables a cualquier tipo de dispositivo, lo que facilita la construcción de sitios web responsive para dispositivos móviles e igualmente funcionales en tablets o computadores. Incluso, las imágenes se adaptan de manera automática a la pantalla del dispositivo
  • Al instalar Bootstrap en angular, encontrarás un soporte extraordinario con HTML5 y CC3. Con él, los usuarios ganarán una gran flexibilidad, y obtendrán unos resultados excelentes.

Al instalar Bootstrap en Angular, podrás utilizar la última versión de este framework, que ya no tiene la dependencia obligatoria del jQuery.

Antes de continuar, recuerda que React y Angular son diferentes y que el framework Bootstrap está relacionado con Angular, porque es un framework de JavaScript, especializado en el desarrollo de aplicaciones web y para dispositivos móviles.

 

¿Por qué escoger Bootstrap?

Instalar Bootstrap en Angular no solo le traerá beneficios a tus usuarios, sino que también facilitará tu vida como desarrollador web, porque según el blog Rockcontent en su artículo ‘Bootstrap: guía para principiantes de qué es, por qué y cómo usarlo’, el framework Bootstrap trae los siguientes beneficios:

  • Sencillo de utilizar: gracias al sistema GRID, el creador puede hacer un diseño por medio de 12 columnas para insertar el contenido. 
  • Código más corto: Pese a la cantidad de elementos que ofrece Bootstrap, la herramienta tiene un código corto: al instalar Bootstrap en Angular simplemente debes vincular la clase al elemento en el que quieres aplicar el recurso. “Su uso elimina la necesidad de escribir muchas líneas de código y también contribuye a reducir el tamaño de los archivos”, lo que hace que la página cargue más rápido.
  • Una comunidad de desarrolladores activa: el framework Bootstrap sigue siendo de código abierto y tiene una comunidad muy activa que colabora con las actualizaciones, da consejos y comenta las últimas noticias.

Bootstrap angular

Foto tomada de Pexels

¿Cómo instalar Bootstrap en Angular?

El desarrollador web Sergio Agamez Negrete en nuestro curso de Crehana ‘Curso online de Bootstrap desde cero: Construye sitios web responsive’ comenta que “Bootstrap es el framework más popular de todo el mundo” y a través de él se puede adquirir el conocimiento para realizar “cualquier sitio web, de una manera más simple”.

Vamos a ver el paso a paso para instalar Bootstrap en Angular, según como lo explica Franco Bello Díaz en su artículo ‘Cómo Integrar el Framework Bootstrap en un proyecto Angular’:

1. Crear proyecto angular

Parece lógico, pero primero que todo se debe crear un proyecto angular en el que se colocará “y” para crear un archivo que se encargará de rutear las páginas.

Rutear las páginas

  • Luego, eliges la hoja de estilos que quieres ocupar y da “Enter”.

Hoja de estilos

  • Das “ng serve” y te debería aparecer la nueva pantalla de inicio de angular.

Nueva pantalla de inicio de angular

2. Instalar Bootstrap en Angular

Instala dependencias necesarias desde el “NPM” y en tu consola tipeas lo siguiente:

    npm install bootstrap jquery @popperjs/core

Estos comandos te permitirán tener las dependencias del bootatrap, jquery y el @popperjs/core que son necesarios para darle un mejor potencial al funcionamiento del framework.

Luego, en el archivo “angular.json”, deberás poner las siguientes instrucciones en los objetos “styles” y “scripts”:

    "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.scss"
    ],
    "scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/@popperjs/core/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]

Y debería quedar así:

Código final

Como ves, instalar Bootstrap en un proyecto Angular es sencillo y mejorará la presentación de todas tus páginas web. 

Pero si aún te sientes perdido con el proceso, puedes investigar un poco sobre los lenguajes de programación más usados para prepararte para el 2022 y sumergirte en el mundo de la programación, para lograr cumplir con el proceso. Además, como en Bootstrap se puede usar con diferentes lenguajes de programación, alguno de esos te ha de servir para instalar esta conocida framework de JavaScript.

 

3. Verificar la instalación del Bootstrap

Para comprobar que hiciste un buen procedimiento al instalar Bootstrap en Angular, debes ir al archivo “app.componente.html” y eliminar todo el contenido que tiene la hoja. 

Ahí agregas el tag button con la clase: “btn btn-danger” lo cual agregara un botón de color rojo con el nombre “Prueba botón”, esto debes hacerlo debajo del <router-outlet></router-outlet>, quedando de la siguiente forma:

Tag button

Al volver a iniciar el servidor con un “ng serve”, el resultado se debería ver así:

Botón de prueba de Bootstrap

Conclusiones

Instalar Bootstrap en Angular te permitirá, además, ofrecer a tu público gran cantidad de componentes que mejoran la interacción y perfeccionan la comunicación con el usuario, como lo son:

  • Las alertas.
  • Los carruseles.
  • La barra de navegación.

Esperamos que esta nota haya sido de gran ayuda para ti y que ahora sepas cómo instalar Bootstrap en angular, para mejorar el aspecto de tu página web. Con base en este nuevo conocimiento, seguramente tendrás más herramientas para escoger sabiamente lo que incluirás en tus sitios web. ¡Ten seguridad en ti!

Si tras mejorar el aspecto de tu página web aún quieres intentar adquirir nuevas habilidades, te invitamos a inscribirte en nuestro curso online de WordPress: Diseña y desarrolla páginas web desde cero con la diseñadora web, Marina Rodrigo. 

También puedes revisar los otros cursos online de desarrollo web y tecnología, con los que adquirirás nuevos conocimientos que de seguro te permitirán ser aún mejor. ¡Nos vemos en la próxima!

También podría interesarte