Bootstrap button doesn't display properly in django form-CodePudding

EDIT: Just realized how bloated this question is and how poorly formated my html. Sorry I didn't catch it before posting. Working on fixing it now

So, as you can probably see in the images, I'm having trouble getting a bootstrap button to display in my Django template properly. It's meant to submit a user registration form but as you can see I've tried putting it in a few places to see if a container is affecting it:Bootstrap buttons as they appear in my project and, of course, it should look like this: enter image description here Here's the relevant template, with the button repeated in a few places:

<!-- my base template -->
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    <title>Short Thoughts Posted Publicly Online</title>
</head>

<body>

<!-- I've got a navbar here, but I can't imagine that's relevant -->

    <div >
        <div >


        {% block content %}


        {% endblock content %}
            </div>
    </div>
<script src="{% static 'js/bootstrap.bundle.js' %}"></script>

</body>

</html>


<!-- my registration template -->

{% extends 'base.html' %}

{% block content %}
<button type="button" >Register</button>
<div >
                    <div >
                    <form method="post">
                        {% csrf_token %}
                        {{form}}


                    </form>
                        <button type="button" >Register
                        </button>
                    </div>
    <button type="button" >Register
                        </button>



</div>
<button type="button" >Register
                        </button>


{% endblock %}

Just for fun, here's the relevant method in my views.py:

def register(request):
if request.method == "GET":
    form = CustomUserCreationForm(request.GET)
    return render(
        request,
        "users/register.html",
        {"form": form}
    )
elif request.method == "POST":
    form = CustomUserCreationForm(request.POST)
    if form.is_valid():
        user = form.save()
        login(request, user)
        return redirect('dwitter:dashboard')
    else:
        return render(
            request,
            "users/register.html",
            {"form": form}
        )

aaaand the my custom form class

class CustomUserCreationForm(UserCreationForm):
username = forms.CharField(label='',min_length=5, max_length=150, widget=forms.TextInput(attrs={
    "class": "form-control",
    "placeholder": "Username",
    "required": "False"
}))
email = forms.EmailField(label='',widget=forms.TextInput(attrs={
    "class": "form-control",
    "placeholder": "Email",
    "required": False
}))
password1 = forms.CharField(label='', widget=forms.PasswordInput(attrs={
    "class": "form-control",
    "placeholder": "Password",

}))
password2 = forms.CharField(label='', widget=forms.PasswordInput(attrs={
    "class": "form-control",
    "placeholder": "Confirm Password",
    
}))

def username_clean(self):
    username = self.cleaned_data['username'].lower()
    new = User.objects.filter(username=username)
    if new.count():
        raise ValidationError("User Already Exist")
    return username

def email_clean(self):
    email = self.cleaned_data['email'].lower()
    new = User.objects.filter(email=email)
    if new.count():
        raise ValidationError(" Email Already Exist")
    return email

def clean_password2(self):
    password1 = self.cleaned_data['password1']
    password2 = self.cleaned_data['password2']

    if password1 and password2 and password1 != password2:
        raise ValidationError("Password don't match")
    return password2

def save(self, commit=True):
    user = User.objects.create_user(
        self.cleaned_data['username'],
        self.cleaned_data['email'],
        self.cleaned_data['password1']
    )
    return user

Incidentally, I am also having trouble getting rid of those "This field is required lables," but I can't rightly say I've done my due diligence on that problem yet

CodePudding user response：

The correct class for Bootstrap buttons is btn btn-primary for a primary button. There is no btn-default.

To avoid the "This field is required labels", do the classic Post/Redirect/Get. So,

def register(request):

    form = CustomUserCreationForm(request.POST or None)

    if form.is_valid():
        user = form.save()
        login(request, user)
        return redirect('dwitter:dashboard')

    return render(request, "users/register.html", {"form": form})

The idea being that if the request is a POST, then request.POST will have data, thus it will be True, and you can check for form validity. If the request is a GET, then request.POST will not have data, thus it will be False, so the None part will take over, giving you an unbound, empty form. The last return will thus have an empty, unbound form, so it will not have any errors. If the form is valid, the the redirect will take place.