Angular

20 mai, 2026

Instalando Bootstrap ao nosso Projeto Angular

Publicidade

como instalar o bootstrap de uma forma simples e rápida.

Primeiro vamos abrir o terminal do nosso VS Code no nosso projeto em Angular.

“Aos que ainda não sabem como iniciar um projeto em Angular, segue o link do artigo onde ensino: https://medium.com/@alefbacelar/criando-projeto-em-angular-8f2b7aca7bb7 ”.

Agora vamos digitar o comando abaixo no terminal:

npm install bootstrap --save

Agora no nosso styles.scss global:

vamos adicionar o seguinte import.

@import '~bootstrap/dist/css/bootstrap.min.css'

Press enter or click to view image in full size

E fácil assim você já pode utilizar o bootstrap. Agora vamos no site do bootstrap: https://getbootstrap.com/docs/5.2/customize/components/
Peguei um nav-bar:

Press enter or click to view image in full size

E uma table:

Press enter or click to view image in full size

Meu código HTML do home-component.html no link abaixo:

E meu SCSS do home-component.scss:

.container {margem superior: 10%;cor da borda: rgb(139, 139, 139);estilo de borda: sólido;raio da borda: 15px;}uma{cor branca;}

Após as alterações vamos ver nossa tela de home:

Press enter or click to view image in full size

Prontinho, agora já temos uma estrutura preparada para começarmos um CRUD