Estilizando formulários automáticos do Django com Bootstrap | Blog da TreinaWeb [ ![TreinaWeb Cursos](https://www.treinaweb.com.br/assets/images/treinaweb-logo@2x.png) ](https://www.treinaweb.com.br "TreinaWeb Cursos") [ Cursos ](https://www.treinaweb.com.br/cursos) [ Cursos ](javascript:) [ 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) [ Infra ](https://www.treinaweb.com.br/categoria/infra) [ Ver todos ](https://www.treinaweb.com.br/cursos) [Todos os cursos](https://www.treinaweb.com.br/cursos) [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) [Quanto custa?](https://www.treinaweb.com.br/planos) [Vantagens](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) [Artigos](https://www.treinaweb.com.br/blog) [Login](https://www.treinaweb.com.br/login) [ Matricule-se ](https://www.treinaweb.com.br/checkout/pagamento/plano/anual) O que você quer aprender? Tudo Cursos Formações Direto ao ponto Artigos Sugestões:- [ CSS ](https://www.treinaweb.com.br/blog/posts?q=css) - [ Oracle ](https://www.treinaweb.com.br/blog/posts?q=oracle) - [ Rails ](https://www.treinaweb.com.br/blog/posts?q=rails) - [ Python ](https://www.treinaweb.com.br/blog/posts?q=python) - [ Mobile ](https://www.treinaweb.com.br/blog/posts?q=mobile) - [ Lógica ](https://www.treinaweb.com.br/blog/posts?q=logica) - [ Angular ](https://www.treinaweb.com.br/blog/posts?q=angular) - [ Flutter ](https://www.treinaweb.com.br/blog/posts?q=flutter) - [ React ](https://www.treinaweb.com.br/blog/posts?q=react) - [ Laravel ](https://www.treinaweb.com.br/blog/posts?q=laravel) - [ Banco de Dados ](https://www.treinaweb.com.br/blog/posts?q=banco-de-dados) - [ Django ](https://www.treinaweb.com.br/blog/posts?q=django) - [ Flask ](https://www.treinaweb.com.br/blog/posts?q=flask) - [ AWS ](https://www.treinaweb.com.br/blog/posts?q=aws) - [ HTML5 ](https://www.treinaweb.com.br/blog/posts?q=html5) - [ Ruby ](https://www.treinaweb.com.br/blog/posts?q=ruby) [ 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. [](https://www.treinaweb.com.br/blog/autor/fagner-pinheiro "Fagner Pinheiro") 8 anos atrás Receba nossos conteúdos Enviar ### Você sabia que a TreinaWeb é a **mais completa escola para desenvolvedores** do mercado? O que você encontrará aqui na TreinaWeb? ![Mentoria de carreira](https://www.treinaweb.com.br/assets/images/mentoria-verde-icone.svg) **Mentoria** de carreira ![Suporte com professores](https://www.treinaweb.com.br/assets/images/suporte-verde-icone.svg) **Suporte direto** com os professores ![Plano de estudo](https://www.treinaweb.com.br/assets/images/plano-verde-icone.svg) **Plano de estudos** simples e direto ![Projetos voltados ao mercado de trabalho](https://www.treinaweb.com.br/assets/images/mercado-verde-icone.svg) Projetos voltados ao **mercado de trabalho** [ Matricule-se agora mesmo ](https://www.treinaweb.com.br/checkout/pagamento/plano/anual) 1. [Artigos](https://www.treinaweb.com.br/blog) 2. Estilizando formulários automáticos do Django com Bootstrap 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]() ##### 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]() ##### 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(a) do artigo ![Fagner Pinheiro]() ##### 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) #### Artigos **relacionados** [ Ver todos ](https://www.treinaweb.com.br/blog/posts) - [](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end "Desenvolvimento Front-end") ![Desenvolvimento Front-end]()##### [ 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 seu... - [](https://www.treinaweb.com.br/blog/categoria/css "CSS") ![CSS]()##### [ 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ári... - [](https://www.treinaweb.com.br/blog/categoria/javascript "Javascript") ![Javascript]()##### [ 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 ca... - [](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end "Desenvolvimento Front-end") ![Desenvolvimento Front-end]()##### [ 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 da... - [](https://www.treinaweb.com.br/blog/categoria/css "CSS") ![CSS]()##### [ 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... - [](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software "Arquitetura de Software") ![Arquitetura de Software]()##### [ 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 manute... - [](https://www.treinaweb.com.br/blog/categoria/css "CSS") ![CSS]()##### [ 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... - [](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end "Desenvolvimento Front-end") ![Desenvolvimento Front-end]()##### [ 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 envolven... - [](https://www.treinaweb.com.br/blog/categoria/css "CSS") ![CSS]()##### [ 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 projeto... - [](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end "Desenvolvimento Front-end") ![Desenvolvimento Front-end]()##### [ 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... - [](https://www.treinaweb.com.br/blog/categoria/css "CSS") ![CSS]()##### [ 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... - [](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end "Desenvolvimento Front-end") ![Desenvolvimento Front-end]()##### [ 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,... ###### ![TreinaWeb](https://www.treinaweb.com.br/assets/images/treinaweb-logo@2x.png) Escola online para desenvolvedores - [ ](https://github.com/treinaweb) - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://twitter.com/treinaweb) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://www.linkedin.com/company/treinaweb) ###### Inscreva-se e receba nossos lançamentos, promoções e novidades Nome: E-mail: Inscreva-se fechar ### Qual o número do seu WhatsApp? ### Quais são as suas áreas de interesse? Base para Devs Front-end Back-end Mobile Bancos de Dados Cloud IA E mais Enviar 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) [ Infra ](https://www.treinaweb.com.br/categoria/infra) A empresa [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) [ O que os alunos dizem? ](https://www.treinaweb.com.br/depoimentos) [ Política de Privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) [Termos de uso](https://www.treinaweb.com.br/termos-de-uso) [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) [Cursos para empresas](https://www.treinaweb.com.br/empresas) [Artigos](https://www.treinaweb.com.br/blog) [Contato](https://www.treinaweb.com.br/contato) [Contato](https://www.treinaweb.com.br/contato) [Artigos](https://www.treinaweb.com.br/blog) Baixe nosso aplicativo - [](https://apps.apple.com/us/app/treinaweb/id1322729447) - [](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) ###### Aceitamos as principais formas de pagamento - - - - - - - - ###### Seus dados e compra estão 100% seguros [](javascript:) [](https://transparencyreport.google.com/safe-browsing/search?url=www.treinaweb.com.br) 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