bootstrap 5.3.3 how to remove the background containers?

Question

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 %}

    
        
            Create Customer Account
            
                {% csrf_token %}
                {% if form.errors %}
                    
                        
                            {% for key, value in form.errors.items %}
                                {{ value }}
                            {% endfor %}
                        
                        
                    
                {% endif %}
                
                    
                        
                             First Name
                            {{ form.first_name }}
                        
                    
                    
                        
                             Last Name
                            {{ form.last_name }}
                        
                    
                
                
                    
                        
                             Username
                            {{ form.username }}
                        
                    
                    
                        
                             Email
                            {{ form.email }}
                        
                    
                
                
                    
                        
                             Password
                            {{ form.password1 }}
                        
                    
                    
                        
                             Confirm Password
                            {{ form.password2 }}
                        
                    
                
                
                    
                        
                             Phone Number
                            {{ form.phone_number }}
                        
                    
                    
                        
                             Address
                            {{ form.address }}
                        
                    
                
                
                    
                        
                             City
                            {{ form.city }}
                        
                    
                    
                        
                             State
                            {{ form.state }}
                        
                    
                
                
                    
                        
                             Zip
                            {{ form.zip }}
                        
                    
                    
                        
                             Birthday
                            {{ form.birthday }}
                        
                    
                
                
                    
                
            
            
                
                    Have an account? Go to Sign in
                
            
        
    


{% endblock content %}

This is the base.html

{% load static %}



    
    
    

    
    
    
    
    
    
    
    

    
    

    
    

    {% block title %}My Site{% endblock title %}



    
        
            
                Home
            
            {% if user.is_authenticated %}
                
                    Logout
                
                
                    Messages
                
                
                    Profile
                
                {% if user.is_customer %}
                    
                        Create Job
                    
                {% endif %}
                
            {% else %}
                
                    Sign In
                
                
                    Sign up
                
            {% endif %}
        
    
    
        {% if messages %}
            
                {% for message in messages %}
                    {{ message }}
                {% endfor %}
                
            
        {% endif %}
        {% block content %}{% endblock content %}
    
    
    
    
        
    

    
    
    
    {% block scripts %}{% endblock scripts %}

Any help would be appreciated

Here is a picture to highlight what I'm talking about. the background shows 2 containers.

Anto Navis · Accepted Answer

Try to Debugging with Developer Tools:

Open Developer Tools: Right-click on the page, select "Inspect" or press F12 on your keyboard.
Use the "Elements" Tab: Check the structure of the page. Look for any unwanted divs, containers, or elements that are creating the background or unnecessary padding/margins.
Check Styles in the "Styles" Tab: You can also see which CSS properties are being applied to certain elements. Look for padding, margins, or background color that could be coming from an unexpected source.

bootstrap 5.3.3 how to remove the background containers?

Answers (1)

Related Questions