<div class="card border-dark bg-white text-dark" style="width: 400px; height: auto; margin :10px auto ">
<div class="card-header">
<h3>Sign up for our Services</h3>
</div>
<div class="card-body">
<form action="/signup" method="post">
<div class="mb-3">
<input autocomplete="off" autofocus type="text" class="form-control" name="email" placeholder="Email">
</div>
{% if email_error %}
<div class="alert alert-danger" role="alert">
{{ email_error }}
</div>
{% endif %}
<div class="mb-3">
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
{% if password_error %}
<div class="alert alert-danger" role="alert">
{{ password_error }}
</div>
{% endif %}
<div class="mb-3">
<input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password">
</div>
{% if confirm_password_error %}
<div class="alert alert-danger" role="alert">
{{ confirm_password_error}}
</div>
{% endif %}
<div class="col text-center">
<button type="submit" class="btn btn-primary">Sign Up</button>
</div>
</form>
</div>
</div>
https://i.sstatic.net/pBHbJc7f.png
I am in the process of developing a sign-up form using card properties from bootstrap. However, I encountered an issue where the card's height is filling up the entire screen.
Various attempts were made to adjust the height by setting it as 'auto' on both the parent and child elements, but the problem persists.