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

Enlaces externos