custom size of field in crispy form django not working

Question

i want to display a form to create posts. i use crispy-form and it currently displays:

with html template:

{% extends 'blog_app/base.html' %}
{% load crispy_forms_tags %}

{% block content %}
    <div class="content-section">
        <form method="POST">
            {% csrf_token %}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Create Post</legend>
                {{ form.media }}
                {{ form|crispy }}
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">Post</button>
            </div>
        </form>
    </div>
{% endblock %}

i want to increase size of the title box and reduce size of the content box so that i fits the content section.

what i tried:

1. in template, display each field as crispy field with specified css class:

{% block content %}
    <div class="content-section">
        <form method="POST">
            {% csrf_token %}
            <div class="form-group col-md-8">
                {{ form.title|as_crispy_field }}
            </div>
            <div class="form-group col-md-8">
              {{ form.content|as_crispy_field }}
            </div>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">Post</button>
            </div>
        </form>
    </div>
{% endblock %}

2. in form class, set helper and layout:

class PostCreateForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ['title', 'content']

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()

        self.layout = Layout(
            Field('title', id="form-title", css_class="col-md-8", name="title"),
            Field('content', id="form-content", css_class="col-md-8", name="title"))

in both ways, nothing changes. can someone give me a pointer?

update:

for the content box, since i used RichTextField from ckeditor for it, when i add the below config to settings.py, the size of it does change to fit the content section. but i still have no idea how to change size of the title box.

CKEDITOR_CONFIGS = {
    'default': {
        'height': '100%',
        'width': '100%',
    },
}

Answer 1

Ensure that you have the correct template pack in your settings.py:

CRISPY_TEMPLATE_PACK = 'bootstrap4'

...and use your columns and rows in the layout (in the form helper, not directly in the form):

from crispy_forms.layout import Layout, HTML, Row, Column


class PostCreateForm(forms.ModelForm):
    
    class Meta:
        model = Post
        fields = ['title', 'content']

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
             Row(
                Column(
                    'title',
                    css_class='col-md-8'
                ),
            ),
             Row(
                Column(
                    'content',
                    css_class='col-md-8'
                ),
            )
        )

Next, use the crispy templatetag:

<form method="POST">
    {% csrf_token %}
    <fieldset class="form-group">
        <legend class="border-bottom mb-4">Create Post</legend>
        {{ form.media }}
        {% crispy form %}
    </fieldset>
    <div class="form-group">
        <button class="btn btn-outline-info" type="submit">Post</button>
    </div>
</form>