'Why aren't my Bootstrap buttons full width?

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/[email protected]/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/[email protected]/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

django bootstrap-5

Solution 1:^[1]

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

<br/>

tag between the buttons

Solution 2:^[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 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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	waffle45
Solution 2	isherwood

'Why aren't my Bootstrap buttons full width?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]