Instalando Bootstrap ao nosso Projeto Angular
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↳Angular30 conteúdosCriando Micro Frontends Angular com Native FederationDev (Back & Front) · mar 2026Angular v21 e o Fim da Cobertura de Testes Exclusivamente em TypeScript: Por Que Precisamos Repensar os Testes de ComponentesDev (Back & Front) · jan 2026Angular 8 é lançado com builder APIs e suporte web workerDev (Back & Front) · mai 2019Ver tudo em Dev (Back & Front) →.
“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
