1

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

Rob
  • 14,746
  • 28
  • 47
  • 65
jbrulmans
  • 975
  • 1
  • 11
  • 32

2 Answers2

1

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>
Banzay
  • 9,310
  • 2
  • 27
  • 46
  • Thanks for your answer. Its not exactly what I was trying to achieve. I wish for the image to be to the right of the input fields, so the image spans multiple rows of the form. Like [this image](http://imgur.com/a/xMUNR) EDIT: Only just saw your snippet in full screen. My bad! Trying this out as I speak. – jbrulmans Jan 02 '17 at 22:07
  • I got it too work with your snippet! Thank you very much! – jbrulmans Jan 02 '17 at 22:26
0

Try adding a col-sm-10 class to your form

Tha'er AlAjlouni ثائر العجلوني
  • 14,069
  • 7
  • 33
  • 38