Configura Bootstrap en Angular 4


En este post se explicará como configurar bootstrap en una aplicación de Angular 4, para esto se tomará como base la aplicación creada en el post Introducción a Angular JS en español.

Paso 1 : Ir al folder del proyecto

El primer paso es, haciendo uso de la linea de comandos posicionarse en el directorio que contiene nuestro proyecto de angular:

cd angular-js-example

Y ejecutar el siguiente comando :

npm install --save bootstrap

Una vez que el comando termina de ejecutarse, bootstrap estará disponible en el folder ../node_modules/bootstrap/dist/css/bootstrap.min.css .

Paso 2: Incluir el css en Angular

Para hacer esto el siguiente paso es editar el archivo angular-cli.json e incluir en el arreglo de styles el css de bootstrap:

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

Paso 3: Probar todo junto

El tercer y último paso es probar todo junto, para esto simplemente ejecutaremos de nuevo nuestro servidor de angular utilizando el comando:

ng serve

Con esto tu aplicación tendrá soporte para bootstrap y ya serás capaz de usarlo en cualquier parte de tu aplicación.

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com

Anuncios

1 comentario »

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s