Bootstrap 5.3.3 how to remove the background containers?

Trying to figure out how to eliminate those background containers. Here is my code. I tried removing all the containers and cards but it still didn't eliminate it. I've looked in my base.html and it does not have any cards or containers. all it has is the nav bar. I've tried using p-0 but that just shifted everything to the left.

{% extends "users/base.html" %}
{% block title %} Register as Customer {% endblock title %}
{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <h4 class="text-center">Create Customer Account</h4>
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                {% if form.errors %}
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <div id="form_errors">
                            {% for key, value in form.errors.items %}
                                <strong>{{ value }}</strong>
                            {% endfor %}
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endif %}
                <div class="form-row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-user"></i> First Name</label>
                            {{ form.first_name }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-user"></i> Last Name</label>
                            {{ form.last_name }}
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-user"></i> Username</label>
                            {{ form.username }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-envelope"></i> Email</label>
                            {{ form.email }}
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-lock"></i> Password</label>
                            {{ form.password1 }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-lock"></i> Confirm Password</label>
                            {{ form.password2 }}
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-phone"></i> Phone Number</label>
                            {{ form.phone_number }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-map-marker-alt"></i> Address</label>
                            {{ form.address }}
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-city"></i> City</label>
                            {{ form.city }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-flag"></i> State</label>
                            {{ form.state }}
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-mail-bulk"></i> Zip</label>
                            {{ form.zip }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="small mb-1"><i class="fas fa-birthday-cake"></i> Birthday</label>
                            {{ form.birthday }}
                        </div>
                    </div>
                </div>
                <div class="form-group mt-4 mb-0">
                    <button type="submit" class="btn btn-primary col-md-12">Sign Up</button>
                </div>
            </form>
            <div class="text-center mt-3">
                <div class="small">
                    <a href="{% url 'login' %}">Have an account? Go to Sign in</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
function formatBirthdayInput(event) {
    const input = event.target;
    let value = input.value.replace(/\D/g, ''); // Remove all non-digit characters
    if (value.length > 2) {
        value = value.slice(0, 2) + '/' + value.slice(2);
    }
    if (value.length > 5) {
        value = value.slice(0, 5) + '/' + value.slice(5);
    }
    input.value = value;
}
</script>
{% endblock content %}

Any help would be appreciated

Вернуться на верх