Estilizando formulários automáticos do Django com Bootstrap \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 13 Horas 35 Min 26 Seg Tempo restante da oferta: 13 35 26 [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) Estilizando formulários automáticos do Django com Bootstrap [ Python ](https://www.treinaweb.com.br/blog/categoria/python) [ Django ](https://www.treinaweb.com.br/blog/categoria/django) # Estilizando formulários automáticos do Django com Bootstrap Veja neste artigo como estilizar, de forma automática, formulários do Django com Bootstrap. [ Fagner Pinheiro ](https://www.treinaweb.com.br/blog/autor/fagner-pinheiro) 8 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/01/17112940/django-forms1.png) No artigo passado “[Criando formulários automaticamente com Django](https://www.treinaweb.com.br/blog/criando-formularios-automaticamente-com-django "Criando formulários automáticos com o Django")”, vimos o quão simples é a criação de formulários automáticos com o Django. Porém, os formulários gerados utilizam HTML puro, ou seja, não há nenhuma estilização para melhorar o visual da aplicação. Sendo assim, neste artigo veremos como estilizar os formulários gerados automaticamente com o Django utilizando o Bootstrap. [ ![Django - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/django.svg) Curso Django - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/django-fundamentos) ## Instalando e configurando o crispy-forms O primeiro passo para estilizar os formulários de uma aplicação é instalar a biblioteca crispy-forms, é ela quem irá estilizar os formulários da nossa aplicação. Para isso, vamos até a aba `Project Interpreter` do PyCharm, buscamos por `django-crispy-forms` e instalamos a biblioteca: ![](https://dkrn4sk0rn31v.cloudfront.net/2019/01/11160623/Captura-de-Tela-2019-01-11-a%CC%80s-15.06.14.png) Após isso, vamos até o arquivo `settings.py` do projeto e registramos a biblioteca. Para isso, no array `INSTALLED_APPS`, adicionamos a seguinte linha: ```python INSTALLED_APPS = [ ... 'crispy_forms', 'app', ] ``` Com isso, indicamos ao nosso projeto que faremos uso da biblioteca `crispy-forms`. O próximo passo é determinar qual framework utilizaremos para estilizar nossos formulários. O `crispy-forms` possui suporte aos seguintes: - bootstrap - bootstrap3 - bootstrap4 - uni-form - foundation Para definir qual será utilizado, precisamos adicionar a configuração `CRISPY_TEMPLATE_PACK` logo após o array `INSTALLED_APPS` do arquivo `settings.py` e determinar qual framework será utilizado. Neste artigo usaremos o bootstrap4, conforme podemos ver abaixo: ```python INSTALLED_APPS = [ ... 'crispy_forms', 'app', ] CRISPY_TEMPLATE_PACK = 'bootstrap4' ``` ## Estilizando os formulários Após instalar e configurar o `crispy-forms`, precisamos configurar o formulário para utilizar o bootstrap4. Para isso, no arquivo responsável por renderizar o formulário de cadastro de usuários, precisamos carregar a biblioteca `crispy-forms`, importar o bootstrap via CDN e, por fim, indicar que usaremos o a biblioteca para estilizar o formulário do Django. No final, o conteúdo do formulário possuirá a seguinte estrutura: ```python {% load crispy_forms_tags %} ## Carregando a biblioteca Cadastro ## Importando o bootstrap {{ form|crispy }} ## Determinando que usaremos o crispy forms Cadastrar ``` Ao final, o formulário que antes era assim: ![](https://dkrn4sk0rn31v.cloudfront.net/2019/01/11164628/Captura-de-Tela-2019-01-11-a%CC%80s-15.46.08.png) Será renderizado assim: ![](https://dkrn4sk0rn31v.cloudfront.net/2019/01/11164645/Captura-de-Tela-2019-01-11-a%CC%80s-15.46.17.png) Tudo isso, novamente, de forma automática e sem escrever uma única linha de código HTML. :D [ ![Django - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/django.svg) Curso Django - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/django-fundamentos) - [ #HTML5 ](https://www.treinaweb.com.br/blog/tag/html5) - [ #bootstrap ](https://www.treinaweb.com.br/blog/tag/bootstrap) - [ #Django ](https://www.treinaweb.com.br/blog/tag/django) Autor ![Fagner Pinheiro](//secure.gravatar.com/avatar/e622f7c7d686a0b11f8d977ce9725b67?d=mm) ## Fagner Pinheiro Professor na TreinaWeb e graduado em Sistemas de Informação pelo Instituto Federal da Bahia. Apaixonado por desenvolvimento web, desktop e mobile desde os 12 anos de idade. Já utilizou todos os sistemas operacionais possíveis, mas hoje se contenta com o OSX instalado em seu desktop. Quando não está trabalhando, é IGL e Awper do time de CS:GO da Treinaweb. Até passou em uma peneira do Cruzeiro, mas preferiu estudar Python. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/fagner-pinheiro) ## 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/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/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/2024/05/Criando_componente_snackbar_com_JavaScript_e_CSS-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ Criando componente snackbar com JavaScript e CSS ](https://www.treinaweb.com.br/blog/criando-componente-snackbar-com-javascript-e-css) Nesse artigo, você irá ter o passo a passo de como criar um componente de snackbar do zero. Sendo capaz de adapta-lo como preferir. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2025/01/NOVIDADES-REACT-19-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 2 anos atrás ## [ 4 Novidades do React 19 ](https://www.treinaweb.com.br/blog/4-novidades-do-react-19) Descubra 4 novidades do React 19, incluindo novos hooks, otimizações de performance e uso prático das Actions para formulários. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/listas-tabelas-HTML-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Apresentando dados com listas e tabelas ](https://www.treinaweb.com.br/blog/apresentando-dados-com-listas-e-tabelas) Neste artigo, veremos como apresentarmos dados com listas e tabelas HTML e qual a sua importância no mundo dos desenvolvedores front-end. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/importancia-dos-testes-de-software-na-qualidade-do-sistema-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 4 anos atrás ## [ Estrutura de pastas e arquivos com React ](https://www.treinaweb.com.br/blog/estrutura-de-pastas-e-arquivos-com-react) Aprenda a criar uma estrutura de pastas e arquivos com React para ter uma aplicação com fácil manutenção e escalável. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/POSITIONS-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Position, estilizando elementos com CSS. ](https://www.treinaweb.com.br/blog/position-estilizando-elementos-com-css) Neste artigo nos iremos aprender sobre position em elementos no CSS, e sua importância para estilizações das nossas páginas web. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/Como_criar_uma_modal_com_a_tag_dialog-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Como criar uma modal com a tag dialog ](https://www.treinaweb.com.br/blog/como-criar-uma-modal-com-a-tag-dialog) Domine modais em HTML com a tag 'dialog'. Crie, personalize e interaja em seu site. Torne-o envolvente e moderno! 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/08/seletores_avancados_do_css-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Seletores avançados do CSS ](https://www.treinaweb.com.br/blog/seletores-avancados-do-css) Nesse artigo você irá entender alguns tipos de seletores pouco utilizados no CSS, porém extremamente úteis no desenvolvimento front-end. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/SELETORES-BASICOS-CSS-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Seletores Básicos do CSS ](https://www.treinaweb.com.br/blog/seletores-basicos-do-css) Neste artigo, nós iremos aprender sobre seletores básicos do CSS e iremos estudar sobre os seletores de tag, classe e id. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/BOOTSTRAP-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ O que é Bootstrap? ](https://www.treinaweb.com.br/blog/o-que-e-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. 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 **13h 35min 26s** - 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