I'm facing an issue with trying to display an image across multiple rows in a horizontal Bootstrap form. The current layout looks like the image below. However, I want the profile picture on the left to span multiple rows of the input field. As it stands, it's pushing the second input field down inexplicably and I can't figure out why. I'm still new to all of this, so I'm stuck. Most solutions I've come across are focused on the bootstrap grid system and don't seem to apply specifically to the Bootstrap form. Has anyone encountered this before or have any ideas on how to achieve this? Please see the snippet of code below. Thank you!
<!-- Basic information -->
<h4>General</h4>
<img src="./img/profile-edit.png" class="col-sm-2 img-profile-edit col-profile"></img>
<form class="form-horizontal">
<div class="form-group form-group-sm">
<label for="name" class="col-sm-3">First Name:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="name">
</div>
</div>
<div class="form-group form-group-sm ">
<label for="surname" class="col-sm-3">Last Name:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="surname">
</div>
</div>
<div class="form-group form-group-sm">
<label for="gender" class="col-sm-3">Gender:</label>
<div class="col-sm-6" id="gender">
<label class="radio-inline"><input type="radio" name="optman">Male</label>
<label class="radio-inline"><input type="radio" name="optwomen">Female</label>
</div>
</div>
<div class="form-group form-group-sm">
<label for="dob" class="col-sm-3">Date of Birth:</label>
<div class="col-sm-6">
<input type="date" format="dd/MM/yyyy" class="form-control" id="dob">
</div>
</div>
</form>
Here are the relevant CSS classes:
.img-profile-edit {
border-radius:15%;
overflow:hidden;
}
@media (min-width: 768px) {
.col-profile {
float: right;
padding: 0 5px;
}
}
EDIT: There is an extra parent <div> in the code snippet.