Instalar Bootstrap en Angular

Rana Hasnain Khan 23 mayo 2022
Instalar Bootstrap en Angular

Presentaremos cómo instalar y usar Bootstrap en Angular.

Instalar Bootstrap en Angular

Bootstrap es un marco CSS que se utiliza para diseñar rápidamente un sitio web receptivo y compatible con dispositivos móviles. Es el marco más popular utilizado ampliamente.

También podemos instalar Bootstrap en nuestra aplicación Angular siguiendo estos sencillos y sencillos pasos. Para crear una nueva aplicación Angular, haremos el siguiente comando en la terminal.

# Terminal
ng new my-app
cd my-app

El comando anterior crea un nuevo proyecto Angular y nos lleva al directorio del proyecto my-app.

Ahora necesitamos instalar Bootstrap en nuestro proyecto Angular, y para hacerlo, debemos ir a la terminal y ejecutar el siguiente comando.

# cli
npm install bootstrap --save

Este comando instalará Bootstrap en nuestro proyecto Angular. Pero si está utilizando SASS en su proyecto, instale bootstrap-sass en su lugar.

# cli
npm install bootstrap-sass --save

Una vez que haya instalado Bootstrap, se guardará en los módulos del nodo, y ahora solo necesitamos importar Bootstrap CSS donde queramos usar Bootstrap usando los siguientes comandos de importación.

# angular
@import '~bootstrap/dist/css/bootstrap.css';

O si está utilizando SASS.

# angular
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

Podemos instalar fácilmente Bootstrap en nuestras aplicaciones Angular y hacer que sea receptivo y compatible con dispositivos móviles mediante el uso de clases de Bootstrap siguiendo estos sencillos pasos.

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

Artículo relacionado - Angular Bootstrap