Проблема стилизации форм django с помощью bootstrap4
У меня возникли проблемы со стилизацией формы в django с помощью bootstrap. Я попробовал несколько различных способов, чтобы заставить ее работать, но не могу.
Есть идеи, как стилизовать эту форму с помощью bootstrap 4?
На данный момент с имеющимся у меня кодом это выглядит следующим образом. стилизация в данный момент картинка
edit_profile_page.html
{% extends 'base.html' %}
{% block title %}Edit Profile Page{% endblock %}
{% block content %}
{% if user.is_authenticated %}
{% if user.id == profile.user.id %}
<h1>Edit Profile Page</h1>
<br/><br/>
<div class="form-group">
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button class="btn btn-info">Update Profile Page</button>
</div>
{% else %}
You got no access here!
{% endif %}
{% else %}
You got no access here!
{% endif %}
{% endblock %}
forms.py
from django.contrib.auth.forms import UserCreationForm, UserChangeForm, PasswordChangeForm
from django.contrib.auth.models import User
from django import forms
from newsapp.models import Profile
class ProfilePageForm(forms.ModelForm):
class Meta:
model = Profile
fields = ('bio', 'profile_pic', 'website_url', 'facebook_url', 'twitter_url', 'instagram_url', 'pinterest_url')
widgets = {
'bio': forms.Textarea(attrs={'class': 'form-control'}),
'website_url': forms.TextInput(attrs={'class': 'form-control', }),
'facebook_url': forms.TextInput(attrs={'class': 'form-control'}),
'twitter_url': forms.TextInput(attrs={'class': 'form-control'}),
'instagram_url': forms.TextInput(attrs={'class': 'form-control'}),
'pinterest_url': forms.TextInput(attrs={'class': 'form-control'}),
}
Здесь проблема в файле forms.py .Textarea,TextInput включены в django.forms.widget поэтому,
код будет выглядеть следующим образом,
forms.py
from django.contrib.auth.forms import UserCreationForm, UserChangeForm, PasswordChangeForm
from django.contrib.auth.models import User
from django.forms.widgets import TextInput, Textarea
from newsapp.models import Profile
class ProfilePageForm(forms.ModelForm):
class Meta:
model = Profile
fields = ('bio', 'profile_pic', 'website_url', 'facebook_url', 'twitter_url', 'instagram_url', 'pinterest_url')
widgets = {
'bio': Textarea(attrs={'class': 'form-control'}),
'website_url': TextInput(attrs={'class': 'form-control', }),
'facebook_url':TextInput(attrs={'class': 'form-control'}),
'twitter_url': TextInput(attrs={'class': 'form-control'}),
'instagram_url':TextInput(attrs={'class': 'form-control'}),
'pinterest_url': TextInput(attrs={'class': 'form-control'}),
}
или
widgets = {
'bio': forms.widgets.Textarea(attrs={'class': 'form-control'}),
..
..
..
..
.
.
}