Instalando Bootstrap en Angular
El proyecto está creado con la opción de rutas habilitada.
Dentro de la carpeta raíz del proyecto instalamos Bootstrap y sus dependencias, jQuery y Popper.js.
npm install bootstrap jquery popper.js
Si todo ha ido correctamente deberíamos ver esta nueva carpeta en nuestro proyecto [node_modules\bootstrap].
Configuración de los estilos
Ahora debemos incluir los nuevos estilos dentro del fichero "angular.json" para que nuestra aplicación reconozca los cambios que hemos realizado:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
En el apartado de scripts agregamos también Bootstrap y las dependencias que hemos instalado al inicio.
"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"
],
Para que los cambios tengan efecto recargamos nuestra aplicación (ng serve --open
). Con estos sencillos pasos hemos incluido Bootstrap.
Aplicando los estilos
Editamos [app.component.css] y cambiamos el color de letra del título de nivel uno <h1>
:
h1 {
color: aquamarine;
}
Podemos hacer esto mismo definiendo el estilo CSS en línea dentro del decorador en [app.component.ts].
Ahora voy a modificar la plantilla para aplicar algunos elementos básicos (contenedores, filas y columnas) de Bootstrap para organizar los contenidos en una rejilla (Grid system · Bootstrap)
<div class="container">
<div class="row">
<div class="col">
<h1>Hola mundo!</h1>
</div>
</div>
</div>
Usando el inspector de Chrome podemos observar como aplica los estilos:
Otras alternativas para instalar Bootstrap
De forma local
Modificamos "angular.json" y añadimos la ruta al CSS.
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],
O lo importamos en [src/style.css]:
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
Usando la libreria de Angular ngx-bootstrap
Si no necesitamos los componentes JS de Bootstrap (y a su vez jQuery):
npm install ngx-bootstrap
Una vez instalado debemos añadir los módulos en [app.module.ts].
Código fuente del ejemplo
- angular / src / conceptos / estilos / bootstrap / bootstrap-install.