Search code examples
htmlcsstwitter-bootstraptwitter-bootstrap-form

Span image over multiple rows in form

I have a question regarding trying to span an image over multiple rows in a horizontal Bootstrap form. The current situation is like in this picture below: enter image description here However, I would like the profile image on the left to span multiple rows of the input field. Now it pushes the second input field way down for some reason, and I cant seem to get my head around it. I'm not really experienced with all of this yet. So I am kind of stuck. All the solutions I seem to find are targeted to the bootstrap grid system and are not really applicable and specific to the Bootstrap form. Does anyone else have experience with this or has an idea how to do this? The current snippet of code can be found below. Thanks in advance!

<!-- Basic information -->
<h4>Algemeen</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">Voornaam:</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">Achternaam:</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">Geslacht:</label>
    <div class="col-sm-6" id="gender">
      <label class="radio-inline"><input type="radio" name="optman">Man</label>
      <label class="radio-inline"><input type="radio" name="optwomen">Vrouw</label>
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label for="dob" class="col-sm-3">Geboortedatum:</label>
    <div class="col-sm-6">
      <input type="date" format="dd/MM/yyyy" class="form-control" id="dob">
    </div>
  </div>
</form>

And the relevant CSS classes:

.img-profile-edit {
  border-radius:15%;
  overflow:hidden; 
}

@media (min-width: 768px) {
  .col-profile {
      float: right;
      padding: 0 5px;
  }
}

EDIT: Parent <div> too much in code snippet

Solution

  • As far as I understand your issue it shoild look like a snippet below. If it fails your wishes for some rerasons, comment it - I'll try to change an answer

    .img-profile-edit {
  border-radius:15%;
  overflow:hidden; 
}

@media (min-width: 768px) {
  .col-profile {
      float: right;
      padding: 0 5px;
  }
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h4>Algemeen</h4>
<div class="col-sm-10">
<form class="form-horizontal">
  <div class="form-group form-group-sm">
    <div class="form-group form-group-sm">
      <label for="name" class="col-sm-3">Voornaam:</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">Achternaam:</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">Geslacht:</label>
      <div class="col-sm-6" id="gender">
        <label class="radio-inline"><input type="radio" name="optman">Man</label>
        <label class="radio-inline"><input type="radio" name="optwomen">Vrouw</label>
      </div>
    </div>
    <div class="form-group form-group-sm">
      <label for="dob" class="col-sm-3">Geboortedatum:</label>
      <div class="col-sm-6">
        <input type="date" format="dd/MM/yyyy" class="form-control" id="dob">
      </div>
    </div>
  </div>
</form>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/200x200" class="img-profile-edit col-profile">
</div>