【Django3】{{ form.as_p }}の部分のレイアウトをきれいにしたい。

Question

こんにちは。
Djangoの新規登録画面のレイアウトをきれいにしたいのですが、
どのように修正すればいいのかわからないので、お力をお借りしたく、質問させていただきます。

前提・実現したいこと

        {{ form.as_p }}

にて記述している社員のID管理画面のレイアウトをきれいにしたい。

発生している問題・エラーメッセージ

現状は以下のような状態です。

→回答内容反映後

該当のソースコード

（bootstrapも利用しています。）
manage_pj\manager\templates\manager\employee_inf_form.html
manager・・・アプリ名

{% extends 'manager/base.html' %}

{% block main %}

    <h1>新規作成</h1>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="btn btn-primary">登録</button>
    </form>

{% endblock main %}

→回答内容反映後

{% extends 'manager/base.html' %}
{% load bootstrap4 %}

{% block main %}

    <h1>新規作成</h1>
    <form method="post">
        {% csrf_token %}
        {% bootstrap_form form layout="horizontal" %} # 編集
        <button type="submit" class="btn btn-primary">登録</button>
    </form>

{% endblock main %}

models.py

from django.db import models
from django.urls import reverse


class Employee_inf(models.Model):

    no = models.CharField(
        max_length=4,
        primary_key=True,
        verbose_name="社員番号",
    )

    name = models.CharField(
        max_length=10,
        verbose_name="名前",
    )

    kana = models.CharField(
        max_length=15,
        verbose_name="かな",
    )

    b_day = models.DateField(
        auto_now=False,
        auto_now_add=False,
        verbose_name="誕生日",
    )

    tel = models.CharField(
        max_length=50,
        verbose_name="電話番号",
    )

    a_id = models.EmailField(
        max_length=64,
        verbose_name="Apple ID",
    )

    a_pass = models.CharField(
        max_length=10,
        verbose_name="パスワード",
    )

    remarks = models.TextField(
        max_length=250,
        blank=True,
        null=True,
        verbose_name="備考",
    )

    def get_absolute_url(self):
        return reverse("detail", args={self.pk})
    
    def __str__(self):
        return self.name

    class Meta:

        verbose_name_plural = "社員情報"

試したこと

HTMLなどでclassをつけようにもどうつけていいかわからず、
手が出せておりません。

→回答後、参照
参照箇所

補足情報（FW/ツールのバージョンなど）

Django 3.1.7
Python 3.9.1

Answer 1

実装手順のまとめを記載。
【流れ】
1.django-bootstrapを導入
2.枠などはしっかりできたが、見た目部分で、枠とタイトルとが離れている部分を
CSSで修正

【手順】

1. Bootstrapをインストール

pip install django-bootstrap4

2.settings.pyへBootstrapの記述を行う

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    "manager",
    "bootstrap4", # ここを追記
]

3.新規作成のhtmlを修正する。

    <h1>新規作成</h1>
    <form method="post">
        {% csrf_token %}
        {% bootstrap_form form layout="horizontal" %} # ここを修正
        <button type="submit" class="btn btn-primary">登録</button>
    </form>

ここまでできて、「発生している問題・エラーメッセージ」の回答反映後のように、
テキスト入力エリア（枠）とタイトルが不自然に離れていたので、CSSで修正。

4.CSSで整える

赤枠の部分をCSSファイルに記述

.col-md-3.col-form-label{
    text-align:center;
}

以上で見た目も整いました。

Answer 2

bootstrapを使用しているのでしたら、django-bootstrap4を利用するのはいかがでしょうか。

Comments

[退会済みユーザー]

早速のご返答ありがとうございます。
導入してみたら、フォーマットが変えれました！

ありがとうございます。

もしよろしければ導入について、二点ほどお聞きしたい内容があります。
こちらのご回答もお願いしてもよろしいでしょうか？

1.layoutを指定できると思うのですが、こちら種類はどこに載っていますか？調べてみたのですが、見つけられませんでした。

2.タイトルと枠とが間が空いてしまいました。こちらの詰め方などあれば教えていただけないでしょうか？

記述したコード
<form method="post">
{% csrf_token %}
{% bootstrap_form form layout="horizontal" %}
<button type="submit" class="btn btn-primary">登録</button>
</form>

[hasami]

1. layoutについて
調べたところhorizontalとinlineのみのようですね。
bootstrap_formタグではなく、bootstrap_fieldタグを使用するので把握していません。

2. タイトルと枠
タイトルと枠が何を示すか理解できていませんが、これらはCSSで設定する必要があると思います。フォームのレイアウトをコントロールしたいのであれば、bootstrap_fieldタグなどを使用することをお勧めします。

[退会済みユーザー]

ご返答が遅くなってしまい申し訳ございません。
アラートがされず遅くなってしまいました。

1.layoutの件について
お調べしていただき、ありがとうございます。
まだまだ探し方が甘いようで申し訳ございません。
また、申し訳ございませんが、「bootstrap_field field」では、現在の設計上、以下のようなエラーがでるみたいなので、今回はformを使用します。
「Parameter "field" should contain a valid Django BoundField.」

2.ありがとうございます。
ただ、上記のようにfieldではエラーがでるので、
少し力業な気がする方法ですが、実装できました。