I am trying to integrate bootstrap into my Django site but it doesn’t look quite right. I was looking for CSS clash but the only stuff I could find is in the static folder and it just has admin related to CSS. All my pages work its just the CSS that looks a bit off. Any help is great, thanks.

<!-- templates/base.html -->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    </head>
    <body>
        {% block nav %}
        <ul id="nav">
            <li>{% block nav-home %}<a href="{% url 'home' %}">Home</a>{% endblock %}</li>
        </ul>
        {% endblock %}
     <div id='content' class="main">
        {% block content %}
        {% endblock %}
     </div>
      {% block scripts %}
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
      {% endblock %}
    </body>
</html>
<!-- templates/registration/login.html -->
{% extends "base.html" %}

{% block title %}Log in{% endblock %}

{% block content %}
<section class="vh-100" style="background-color: #508bfc;">
  <div class="container py-5 h-100">
    <div class="row d-flex justify-content-center align-items-center h-100">
      <div class="col-12 col-md-8 col-lg-6 col-xl-5">
        <div class="card shadow-2-strong" style="border-radius: 1rem;">
          <div class="card-body p-5 text-center">

            <h3 class="mb-5">Sign in</h3>

            <div class="form-outline mb-4">
              <input type="email" id="typeEmailX-2" class="form-control form-control-lg" />
              <label class="form-label" for="typeEmailX-2">Email</label>
            </div>

            <div class="form-outline mb-4">
              <input type="password" id="typePasswordX-2" class="form-control form-control-lg" />
              <label class="form-label" for="typePasswordX-2">Password</label>
            </div>

            <!-- Checkbox -->
            <div class="form-check d-flex justify-content-start mb-4">
              <input class="form-check-input" type="checkbox" value="" id="form1Example3" />
              <label class="form-check-label" for="form1Example3"> Remember password </label>
            </div>

            <button class="btn btn-primary btn-lg btn-block" type="submit">Login</button>

            <hr class="my-4">

            <button class="btn btn-lg btn-block btn-primary" style="background-color: #dd4b39;"
              type="submit"><i class="fab fa-google me-2"></i> Sign in with google</button>
            <button class="btn btn-lg btn-block btn-primary mb-2" style="background-color: #3b5998;"
              type="submit"><i class="fab fa-facebook-f me-2"></i>Sign in with facebook</button>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}

Expected:

Actual:
actual

2

The problem isn’t with your library imports. It’s with your syntax. Make sure you’re following the correct documentation version.

Inputs won’t have internal labels if you use label elements like that. Use aria-label and placeholder attributes on the input element instead.

Buttons aren’t sized with btn-block in Bootstrap 5. Use the w-100 sizing class instead.

Buttons won’t have default margin, either. Use spacing classes as needed.

in the email and password input tags include

<input ..... placeholder="Email">

Doing this will put email inside of the text box.

If you do this…

<div class="form-outline mb-4">
    <label class="form-label" for="typePasswordX-2">Password</label>
    <input type="password" id="typePasswordX-2" class="form-control form-control-lg" />
          
</div>

The label will appear above the text box. If you do not want just get rid of the label tag. I recommend leaving it on as it helps with accessibility.

and add a
tag between the buttons