Formas de se trabalhar com Bootstrap 5 \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 21 Horas 56 Min 56 Seg Tempo restante da oferta: 21 56 56 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Formas de se trabalhar com Bootstrap 5 [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) # Formas de se trabalhar com Bootstrap 5 Existem algumas maneiras diferentes de se trabalhar com Bootstrap em nossos projetos, vamos descobrir todas as formas do uso do framework. [ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 5 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/04/Formas_de_se_trabalhar_com_o_Bootstrap_5.jpg) Existem diferentes formas de se trabalhar com Bootstrap em nossos projetos. Hoje vamos descobrir que maneiras são essas. Muito diferente do que se imagina, o Bootstrap pode ser adicionado de diversas formas. Logo abaixo veremos em detalhes cada uma dessas opções, porém, muitas pessoas ainda não gostam de trabalhar com Bootstrap em seus projetos, por falta de conhecimento em relação ao framework, ou, por acreditar que todos os componentes disponíveis ficarão iguais em todos os sites. Vamos quebrar esse tabu e aprender a trabalhar com o framework. Vamos saber também todos as maneiras possíveis. [ ![Bootstrap - Primeiros passos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/bootstrap-5.svg) Curso Bootstrap - Primeiros passos Conhecer o curso ](https://www.treinaweb.com.br/curso/bootstrap-primeiros-passos) ## Bootstrap via CDN Primeiramente, precisamos saber o que é “CDN”, a sigla vem de `Content Delivery Network`, que nada mais é, do que um conjunto de servidores espalhados pelo mundo, para que seu conteúdo seja acessado de uma forma estável. Caso queira aprender em mais detalhes sobre CDN’s, recomendo a leitura do artigo [O que é CDN?](https://www.treinaweb.com.br/blog/o-que-e-cdn-content-delivery-network) que temos aqui no nosso blog. Agora que temos essa informação, vamos entender essa forma de importação. Quando usamos o Bootstrap dessa forma, todas às vezes que alguém carregar o nosso site, o servidor mais próximo da localidade de quem está acessando, irá fornecer os estilos para a página. Independentemente de você fazer uso, se é apenas do sistema de grid, ou de algum componente específico. Logo, seu carregamento irá carregar estilos desnecessários. Causando lentidão dependendo da velocidade da internet do usuário. Outro ponto importante é que, neste caso, não é possível a alteração de nenhuma variável, ou classe do Bootstrap. Você terá que utiliza-lo da maneira com que aparecerem de exemplo no seu site oficial. Sendo possível, eventualmente, sobrescrever as classes se quiser alterar alguma cor, borda ou espaçamento. Ainda assim, é uma prática não recomendada, pelo fato da possibilidade de causar conflitos entre as classes. Certamente, essa é uma forma de se utilizar bem simples. Não requer nenhuma habilidade especial para efetuar esse procedimento. O desenvolvedor consegue fazer o uso de todas as classes necessárias sem nenhum problema. Justo da alta estabilidade dos servidores, torna a implementação via CDN a forma mais comum do uso do Bootstrap. [ ![Bootstrap - Conhecendo os Utilities e Helpers](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/bootstrap-5.svg) Curso Bootstrap - Conhecendo os Utilities e Helpers Conhecer o curso ](https://www.treinaweb.com.br/curso/bootstrap-conhecendo-os-utilities-e-helpers) ## Download Manual dos estilos Bootstrap Outra forma de uso do framework é o download manual, sendo outra maneira também muito simples de se trabalhar com Boostrap. Quando fazermos download dos estilos recebemos quatro arquivos CSS separados, e outras quatro sub separações, dando um total de 16 arquivos diferentes. Recebemos os: `reboot`, `utilities`, `grid` e CSS completo. Todos esses arquivos possuem, como disse anteriormente, quatro arquivos separados, que são os: arquivos CSS minificados, `rtl (right to left)`, `rtl` minificado e o CSS normal como conhecemos. Arquivos minificados são utilizados para produção, são os mesmos estilos CSS, só que de uma forma que o computador leia mais rápido. Já os `rtl` é uma implementação que existe apenas na versão 5 do framework. Ela serve para pessoas que utilizam esse tipo de escrita, da direita para a esquerda. Essa forma de trabalhar com Boostrap nos deixa com um pouco mais de liberdade, pois, se estamos trabalhando apenas com o sistema de grid, podemos utilizar o arquivo `bootstrap-grid.css`, e assim conforme nossa necessidade. Entretanto, essa forma também não nos dá total manipulação da ferramenta. Novamente ficamos presos aos estilos definidos por eles, é claro, que como o CDN, podemos sobrescrever classes. Porem também vamos estar propícios aos mesmos problemas. Essa forma nos assegura de que caso aconteça algo com os servidores Bootstrap, não ficamos sem os estilos. Pois, iremos utilizar os arquivos que fizemos download, da mesma forma que utilizamos nossos estilos. [ ![Bootstrap - Layout e Grid System](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/bootstrap-5.svg) Curso Bootstrap - Layout e Grid System Conhecer o curso ](https://www.treinaweb.com.br/curso/bootstrap-layout-e-grid-system) ## Instalação via Package managers dos estilos Boostrap Essa é a forma de se trabalhar com Bootstrap que nos proporciona total manipulação de todas as variáveis, direto na raiz das estilizações. Ou seja, dessa forma você consegue deixar seu arquivo de estilo consideravelmente mais leve. Trazendo apenas o que utilizar, como, por exemplo, você pode importar apenas um estilo de componente, sem a necessidade de importação de inúmeras classes sem uso. Como nem tudo são flores, implementar via package managers, tem sua consideração, pois se torna mais complexa de se utilizar, principalmente para uma pessoa que está começando e não possui muita experiência. Nesse caso você precisará ter um conhecimento prévio de Sass. Também é importante conhecer o gerenciador de pacotes que estiver utilizando. Bastante utilizado em projetos grandes, que precisam de alta performance. Temos aqui no blog o artigo [Como instalar e utilizar o Bootstrap via npm](https://www.treinaweb.com.br/blog/como-instalar-e-utilizar-o-bootstrap-via-npm) ensinando o passo a passo dessa instalação. Usando um dos gerenciadores de pacotes mais conhecidos o [npm](https://www.treinaweb.com.br/blog/o-que-e-npm-e-como-usar-uma-biblioteca-instalada-por-ele). [ ![Bootstrap - Trabalhando com formulários](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/bootstrap-5.svg) Curso Bootstrap - Trabalhando com formulários Conhecer o curso ](https://www.treinaweb.com.br/curso/bootstrap-trabalhando-com-formularios) ## Conclusão Agora que você tem o conhecimento de todas as diferentes formas de utilização do Bootstrap, fica muito mais fácil de decidir como utilizar. Afinal, não existe uma maneira absoluta de usar, e sim a forma que mais se adéqua a nossa necessidade. Por fim, caso queira aprender mais sobre o Bootstrap e sua infinidade de recursos saiba que aqui na Treinaweb temos o curso [Bootstrap - Primeiros passos](https://www.treinaweb.com.br/curso/bootstrap-primeiros-passos "Bootstrap - Primeiros passos") que possui **03h20** de vídeo e um total de **15 exercícios**. Conheça também nossos outros cursos de Bootstrap. Veja quais são os tópicos abordados durante o curso de Bootstrap - Primeiros passos: - Conhecerá a estrutura do framework e seus conceitos essenciais; - Entenderá as diferentes maneiras de incorporar o Bootstrap a uma aplicação web; - Compreenderá o Grid System e o Flexbox incorporados ao Bootstrap; - Conseguirá criar interfaces responsivas e adaptativas de maneira muito simples. - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #bootstrap ](https://www.treinaweb.com.br/blog/tag/bootstrap) - [ #desenvolvimento web ](https://www.treinaweb.com.br/blog/tag/desenvolvimento-web) - [ #framework css ](https://www.treinaweb.com.br/blog/tag/framework-css) - [ #bootstrap 5 ](https://www.treinaweb.com.br/blog/tag/bootstrap-5) Autor ![Amauri Blanco Corrêa](//secure.gravatar.com/avatar/98d195107c5e3e8d91ee13c18f2a8f34?d=mm) ## Amauri Blanco Corrêa Sou formado em Análise e Desenvolvimento de Sistemas pela Universidade Cruzeiro do Sul, uma pessoa extremamente curiosa e dedicada, amo tecnologia e sempre busco aprender e aperfeiçoar meus conhecimentos. Atuo há mais de 3 anos como desenvolvedor e instrutor Front-end sou um eterno estudante do mundo da tecnologia. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/amauri) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/NEST-JS-CLASS-VALIDATOR-CLASS-TRANSFORMER-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Como enviar emails com NestJS e Nodemailer ](https://www.treinaweb.com.br/blog/como-enviar-emails-com-nestjs-e-nodemailer) Neste artigo vamos aprender como enviar emails utilizando o NestJS e o Nodemailer, um dos módulos mais utilizados do ecossistema NodeJS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Guia do framework NestJS ](https://www.treinaweb.com.br/blog/guia-do-framework-nestjs) Neste guia do framework NestJS vamos fazer um compilado de tópicos úteis sobre o framework, desde criar um projeto básico até autenticação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/01/22182140/TEMPLATES-GRATUITOS-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 8 anos atrás ## [ Templates gratuitos para aplicações administrativas ](https://www.treinaweb.com.br/blog/templates-gratuitos-para-aplicacoes-administrativas) Neste artigo veremos alguns templates para criação de aplicações administrativas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/09/automatizando-tarefas-de-um-projeto-csharp-com-o-cake-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 9 anos atrás ## [ Automatizando tarefas de um projeto C# com o Cake ](https://www.treinaweb.com.br/blog/automatizando-tarefas-de-um-projeto-csharp-com-o-cake) Veja como o Cake pode auxiliar na automação de tarefas de um projeto .NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/11/diferenca_entre_os_atributos_async_e_defer-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Diferença entre os atributos async e defer ](https://www.treinaweb.com.br/blog/diferenca-entre-os-atributos-async-e-defer) Nesse artigo vamos ver em detalhes como os atributos async e defer se comportam ao declarar seus arquivos JavaScript no HTML. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/01/17112940/django-forms1-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 8 anos atrás ## [ Estilizando formulários automáticos do Django com Bootstrap ](https://www.treinaweb.com.br/blog/estilizando-formularios-automaticos-do-django-com-bootstrap) Veja neste artigo como estilizar, de forma automática, formulários do Django com Bootstrap. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071245/intro-inkscape-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Começando com SVG no Front-End - Parte 2 - Trabalhando com Inkscape ](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-2-trabalhando-com-inkscape) Aprenda a criar formas e imagens vetoriais em SVG para usar em suas páginas web de maneira bem simples com este tutorial de introdução ao Inkscape. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/habilidades-tecnicas-atualizadas-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 4 anos atrás ## [ Como manter as habilidades técnicas de TI atualizadas? ](https://www.treinaweb.com.br/blog/como-manter-as-habilidades-tecnicas-de-ti-atualizadas) Confira nesse artigo algumas dicas com formas variadas de como você pode conseguir manter suas habilidades técnicas apuradas e em dia. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071147/intro-svg-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Começando com SVG no Front-End - Parte 1 ](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-1) Aprenda a começar a trabalhar com SVG para a criação de formas e efeitos no Front-End. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/seguranca-em-vpc-com-network-acl-e-security-group-400x280.png) [ Amazon ](https://www.treinaweb.com.br/blog/categoria/amazon) 6 anos atrás ## [ Segurança em VPC com Network ACL e Security group ](https://www.treinaweb.com.br/blog/seguranca-em-vpc-com-network-acl-e-security-group) Após criar uma VPC na AWS, não podemos nos descuidar com relação a segurança dessa rede. Existem duas formas de garantir a segurança em VPC no nível de rede: com Network ACL e security groups. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/Criando_mascara_monetaria_com_expressoes_regulares-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando máscara monetária com expressões regulares ](https://www.treinaweb.com.br/blog/criando-mascara-monetaria-com-expressoes-regulares) Nesse artigo aprenderemos a criar uma máscara para inputs que irá deixar seus projetos mais profissionais utilizando as expressões regulares. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **21h 56min 56s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58