Why aren't my Bootstrap buttons full width?

May 3, 2022

I am trying trying to integrate bootstrap into my Django site but it doesn’t look quite right. I was looking for CSS clashes but the only stuff I could find is in the static folder and it just has admin related 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

>Solution :

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 don’t have uppercase labels in Bootstrap 5, either. That screenshot must be from an earlier version.

And buttons won’t have default margin. Use spacing classes as needed.

Font sizes are calculated and configured differently from earlier versions as well.