Django | crispy-forms 사용하기(bootstrap5)

포스트 작성 페이지에서 <table>로 만들어진 입력 폼이 한쪽에 치우쳐 있어 모양이 예쁘다고 볼 수 없다.

이런 문제를 crispy-forms를 사용하여 오른쪽 그림과 같이 해결할 수 있다.

crispy-forms 사용 전/후

bootstrap4 기준으로는 pip install을 이용해 하나만 설치해 주면 되지만 bootstrap5에서는 추가로 하나를 더 설치해주어야 한다.

pip install django-crispy-forms

pip install crispy-bootstrap5

 

그다음 설치한 모듈들을 settings.py에 등록시켜주어야 한다.

INSTALL_APPS에 crispy-forms와 crispy_bootstrap5를 등록시켜 주고, 맨 아래에 bootstrap5를 사용하겠다고 지정한다.

 

그런 다음 포스트 작성 페이지를 구성하는 html 파일에 crispy_forms를 적용할 수 있도록 맨 위에 {% load crispy_forms_tags %}를 추가한다.

입력 폼에 cripsy_forms를 적용하기 위해 <table> 태그에 있던 요소들을 밖으로 꺼내주고, <table> 태그를 삭제한 뒤 {{ form }}을 {{ form | crispy }}로 수정한다.

이렇게 하면 더 이상 입력 폼이 테이블 형태로 나타나지 않는다.

코드 수정 전/후

 

참고

GitHub - django-crispy-forms/crispy-bootstrap5: Bootstrap5 template pack for django-crispy-forms