-1

using bootstrap3 grid system I would like 2 x columns with 3 rows.

In column 1 I would have 3 x rows of text inputs(a,b,c) and in column 2 I would like 1 image which would take up the entire 3 rows.

Is there a way of doing this?

example here

http://jsfiddle.net/sLxcf5jd/1/

<div class="row">
 <div class="col-sm-2"><div class="well">1</div></div>
 <div class="col-sm-2"><div class="well">2<img src="http://placehold.it/100x350"></div></div>
</div>
<div class="row">
 <div class="col-sm-2"><div class="well">2</div></div>
</div>
<div class="row">
  <div class="col-sm-2"><div class="well">3</div></div>
</div>

rob
  • 149
  • 2
  • 11
  • What you're asking for (as I understand it), is exactly how `row` and columns work in bootstrap. Please show what you have tried. – Patel Nov 06 '15 at 13:05
  • What you're really asking is how to make [same-height columns](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height). You'd then set your image to 100% height or set it as a background with size `cover`. – isherwood Nov 06 '15 at 13:25
  • added example, as you can see the images pushes the over rows down, i want it display nicely next to the rows – rob Nov 06 '15 at 14:22

1 Answers1

1

I edited your fiddle, you can see it here: JSFiddle 

<div class="row">
  <div class="col-sm-2">
     <div class="row">
         <div class="well">1</div>
     </div>
     <div class="row">
         <div class="well">2</div>
     </div>
     <div class="row">
         <div class="well">3</div>
     </div>
  </div>

  <div class="col-sm-2">
     <div class="well">
         2
         <img src="http://placehold.it/80x160">
     </div>
  </div>
</div>
Ján Kyselica
  • 701
  • 5
  • 15