I'm looking to style an input-group with a form input and submit button using Bootstrap 5.
Here's my current code:
.card {
margin: auto;
width: 50%;
padding: 10px;
opacity: 0.9!important;
top: 250px;
}<div class="card-header">Login</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="input-group mb-3">
<div class="form-group col-md-6 input-group-prepend">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group col-md-6 input-group-append">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>However, I'm facing an issue where the size and positioning of my button in relation to the input form is not ideal. Picture https://i.sstatic.net/VEYeJ.png
Could someone advise on how to correct this?