O que é Bootstrap? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 02 Horas 30 Min 10 Seg Tempo restante da oferta: 02 30 10 [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) O que é Bootstrap? [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) # O que é Bootstrap? Os frameworks são ferramentas incríveis e que poupam muito tempo dos desenvolvedores. Neste artigo, vamos conferir o Bootstrap, um dos mais populares frameworks front-end atualmente. [ Marylene Guedes ](https://www.treinaweb.com.br/blog/autor/marylene-guedes) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/BOOTSTRAP.png) Os [frameworks](https://www.treinaweb.com.br/blog/para-que-serve-um-framework/ "frameworks") são ferramentas incríveis e que poupam muito tempo dos desenvolvedores. Neste artigo, vamos conferir o **Bootstrap**, um dos mais populares frameworks front-end atualmente. ### Afinal, o que é o Bootstrap? O **Bootstrap** é um framework [front-end](https://www.treinaweb.com.br/blog/o-que-e-front-end-e-back-end/ "front-end") gratuito e de código-fonte aberto, que disponibiliza componentes prontos para você utilizar em seu projeto. Com ele, você consegue criar e personalizar sites responsivos para dispositivos móveis, desktops e notebooks, com componentes pré-construídos e com plugins JavaScript poderosos. Tudo isso porque toda a estrutura do [HTML, CSS](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-html-e-css/ "HTML, CSS") e Javascript já se encontram prontas, bastando apenas que o desenvolvedor importe suas dependências em seu projeto. **Por exemplo:** se você quer colocar em seu site um botão estilizado, você pode utilizar o componente button do Bootstrap diretamente, ou mesmo fazer pequenas customizações no componente para que ele tenha a aparência desejada. Com estes componentes pré-prontos, você ganha tempo, o que consequentemente faz com que seu projeto seja finalizado mais rapidamente, com menos esforço e até mesmo com mais qualidade. Primeiramente, o Bootstrap foi desenvolvido pelo Twitter, onde inicialmente era apenas um projeto para padronizar o desenvolvimento dentro da própria empresa. Porém, no meio do desenvolvimento do projeto, a equipe percebeu o potencial que este framework tinha para impactar e trazer benefícios para a comunidade. Dessa maneira, ele foi liberado em 2011 já como um projeto open source, ou seja, para que os outros desenvolvedores pudessem contribuir. De lá pra cá, nesse meio tempo, foram muitas mudanças até chegar sua atual versão 4, que possui inúmeras novidades tanto nos componentes CSS quanto nos componentes [JavaScript](https://www.treinaweb.com.br/blog/o-que-se-pode-fazer-com-javascript-hoje-em-dia/ "JavaScript"). ### Por que utilizar o Bootstrap? O Bootstrap segue os princípios de usabilidade e tendências de design para interfaces. Além disso, sua padronização permite que os sites tenham um visual atraente, ou seja, uma forma de criar páginas esteticamente agradáveis aos usuários. Ele conta ainda com componentes e plugins já prontos para você utilizar em seus projetos, o que faz com que você ganhe muita produtividade na hora de desenvolver. Você pode adaptar o modelo-base do Bootstrap para atender às necessidades do seu projeto. ![framework Bootstrap](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/utilizando-o-framework.png) As [APIs](https://www.treinaweb.com.br/blog/o-que-e-uma-api/ "APIs") do Bootstrap são tão poderosas e flexíveis que você tem total liberdade para personalizar os componentes da maneira como desejar com um mínimo de esforço. Nas figuras abaixo, temos exemplos de componentes do Bootstrap que foram livremente personalizados. ![Componentes do Bootstrap](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/componentes-bootstrap.png) Com o Bootstrap, você também não precisa se preocupar se seu site funcionará bem em todas as diferentes resoluções de dispositivos: o Bootstrap já contém componentes responsíveis, já diminuindo consideravelmente o esforço envolvido na criação de interfaces plenamente responsivas. ### Vantagens e desvantagens Algumas vantagens e algumas desvantagens podem ser destacadas com relação a este framework. ##### Vantagens: - **Responsividade:** possui um sistema de layout 100% responsivo, capaz de manter a página completamente responsiva em diferentes dispositivos e resoluções; - **Extensa biblioteca de componentes:** possui um conjunto de componentes extenso, como ícones, painéis etc.; - **Documentação:** possui uma documentação bem completa e acessível; - **Reuso de código:** Como o Bootstrap entrega uma gama muito grande de componentes pré-prontos, se torna muito mais fácil lidar com questões como reusabilidade de código. ##### Desvantagens - **Excesso de padronização:** como a gama dos componentes pré-prontos é extensa e atende a praticamente todos os cenários no que diz respeito ao desenvolvimento de páginas web responsivas, as diferentes aplicações podem acabar ficando “com a mesma cara”. Porém, sua customização é bastante simples. [ ![Joomla - Criação de Temas](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/joomla.svg) Curso Joomla - Criação de Temas Conhecer o curso ](https://www.treinaweb.com.br/curso/joomla-criacao-de-temas-completo) ### Como aprender sobre o Bootstrap? O Bootstrap é muito simples para aprender e customizar. Além da [documentação oficial](https://getbootstrap.com/docs/4.5/getting-started/introduction/ "documentação oficial"), temos os [nossos cursos de Bootstrap](https://www.treinaweb.com.br/cursos-online?q=bootstrap "nossos cursos de Bootstrap"), que acabaram de ser atualizados. Então, vale a pena dar uma conferida :) Se você é um desenvolvedor front-end ou deseja seguir essa carreira, é interessante colocar o Bootstrap em seu plano de estudos. Ele irá te auxiliar muito no desenvolvimento de seus sites, fazendo-o ter muita produtividade. Você também pode utilizá-lo com outras ferramentas atuais do mercado como o [Angular](https://www.treinaweb.com.br/blog/o-que-e-o-angular-e-para-que-serve/ "Angular") e o [React](https://www.treinaweb.com.br/blog/conheca-o-react-biblioteca-para-desenvolvimento-web/ "React"). Quando falamos de frameworks de componentes visuais, o Bootstrap não é o único no mercado. Alguns de seus concorrentes diretos são o Materialize e o Foundation. Porém, a simplificação e a baixa curva de aprendizagem ainda fazem o Bootstrap ser um dos frameworks mais adotados pelo mercado. - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #bootstrap ](https://www.treinaweb.com.br/blog/tag/bootstrap) - [ #framework ](https://www.treinaweb.com.br/blog/tag/framework) - [ #componentes ](https://www.treinaweb.com.br/blog/tag/componentes) Autor ![Marylene Guedes](//secure.gravatar.com/avatar/5b0ba52b3705f298802db58782656bbc?d=mm) ## Marylene Guedes Responsável pelo sucesso do cliente na TreinaWeb. Graduada em Gestão de Tecnologia da Informação pela FATEC Guaratinguetá, além de estudante de UX/UI. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/marylene-guedes) ## 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/2019/04/23151507/TRUQUES-NPM-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 6 anos atrás ## [ O que é NPM e como usar uma biblioteca instalada por ele ](https://www.treinaweb.com.br/blog/o-que-e-npm-e-como-usar-uma-biblioteca-instalada-por-ele) Saiba o que é o NPM (Node Package Manager), como utilizar um pacote, framework ou biblioteca instalada por ele e sobre o package.json. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/front_vs_back-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 10 anos atrás ## [ O que é front-end e back-end? ](https://www.treinaweb.com.br/blog/o-que-e-front-end-e-back-end) Os desenvolvedores de front-end e back-end se completam na maioria dos casos. Se faz indispensável saber o papel que cada um desempenha ou pode desempenhar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/02/CSS-JS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ O que é PostCSS e suas funcionalidades ](https://www.treinaweb.com.br/blog/o-que-e-postcss-e-suas-funcionalidades) Neste artigo veremos uma ferramenta que vem auxiliando muito os desenvolvedores durante seus projetos, sendo ela, PostCSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/TAILWIND-CSS-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ O que é Tailwind CSS e como instalar via CDN? ](https://www.treinaweb.com.br/blog/o-que-e-tailwind-css-e-como-instalar-via-cdn) Neste artigo aprenderemos a criar um navbar usando Tailwind CSS, e entender melhor como funciona seus componentes de estilização. 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/2022/04/Formas_de_se_trabalhar_com_o_Bootstrap_5-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Formas de se trabalhar com Bootstrap 5 ](https://www.treinaweb.com.br/blog/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. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/Como_instalar_e_utilizar_o_Bootstrap_via_npm-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Como instalar e utilizar o Bootstrap via npm ](https://www.treinaweb.com.br/blog/como-instalar-e-utilizar-o-bootstrap-via-npm) Instalar Bootstrap via npm e alterar suas variáveis, é mais simples do que imagina. Hoje iremos juntos fazer o download do Bootstrap 5. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/TAILWIND-NPM-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Instalando Tailwind CSS via NPM e alterando suas propriedades CSS com theme ](https://www.treinaweb.com.br/blog/instalando-tailwind-css-via-npm-e-alterando-suas-propriedades-css-com-theme) Neste artigo, veremos como instalar e utilizar a tecnologia Tailwind CSS via NPM. Também iremos alterar suas propriedades CSS com theme. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/camadas-e-componentes-do-padrao-arquitetural-porto-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 6 anos atrás ## [ Camadas e componentes do padrão arquitetural Porto ](https://www.treinaweb.com.br/blog/camadas-e-componentes-do-padrao-arquitetural-porto) Conheça as camadas e componentes do padrão arquitetural Porto. Nesse artigo vamos aprender como cada camada se comunica e a responsabilidade dos componentes. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/TEMPLATES-GRATUITOS-LANDING-PAGES-400x280.png) [ Marketing Digital ](https://www.treinaweb.com.br/blog/categoria/marketing-digital) 6 anos atrás ## [ Templates gratuitos para Landing Page ](https://www.treinaweb.com.br/blog/templates-gratuitos-para-landing-page) Veja neste artigo templates gratuitos para Landing Page. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/29141047/capa-framework-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 8 anos atrás ## [ Para que serve um framework? ](https://www.treinaweb.com.br/blog/para-que-serve-um-framework) Veja neste artigo o que é um framework e para que ele serve. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/10/22110927/FRAMEWORKS-CSS-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ Os principais frameworks CSS ](https://www.treinaweb.com.br/blog/os-principais-frameworks-css) Neste artigo veremos alguns dos principais frameworks CSS do mercado e algumas de suas características. 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 **02h 30min 10s** - 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