<div class="card border-dark bg-white text-dark" style="width: 400px; height: auto; margin :10px auto ">
<div class="card-header">
<h3>Register to REFILM</h3>
</div>
<div class="card-body">
<form action="/register" method="post">
<div class="mb-3">
<input autocomplete="off" autofocus type="text" class="form-control" name="username" placeholder="Username">
</div>
{% if username_error %}
<div class="alert alert-danger" role="alert">
{{ username_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="confirmation" placeholder="Confirm password">
</div>
{% if confirmation_error %}
<div class="alert alert-danger" role="alert">
{{ confirmation_error }}
</div>
{% endif %}
<div class="col text-center">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</form>
</div>
</div>
I’m creating a registration window using card properties in bootstrap. But it’s very strange because the height of the card fills the screen.
I’ve tried settings like height: auto on parent tag and child tag, but it’s still the same.
4
Answers
I just put the fit-content in the css tag and the height was automatically adjusted!
Solution : remove for card-body tag
Did you tried putting the height in the card-body css?
I would use a mixture of the utility classes and maximum-height custom style to generate this. Specifically a vh-100 to tell it to take up 100% of the horizontal viewport, but have "maximum-height:400px" in the style tag to put a cap on that of 400 pixels.
So, change your card tag to read: