Bootstrap not possible to put a well in a col? - css

Question

I want to put a .well div (or a button whatever), in the green area of this picture:
here
Here is my code for now:
<div class="container-fluid">
<div class="row row1" style="height: 400px;">
<div class="col-lg-4 col-lg-offset-1">
aaaa <!-- BUTTON OR WELL HERE -->
</div>
</div>
css:
.row1 {
background: url("appart.jpg");
background-size: 100% 400px;
background-repeat: no-repeat;
}
Problem, if I try this code:
<div class="container-fluid">
<div class="row row1" style="height: 400px;">
<div class="col-lg-4 col-lg-offset-1">
<div class="well well-sm">aaa
</div>
</div>
I obtain this result:
here
How can I put the .well div inside the green area (and have its height and width inferior than the green area ones)?

Answer 1

I am not exactly sure of what you are asking but... keep in mind the bootstrap col sizes. If you use lg it will get confused if the screen gets smaller than the lg size. Better then to use xs if you don't want to declare the other sizes.
Also, don't do inline css.
Is this what you are looking for?
Fiddle here
HTML:
<div class="container-fluid">
<div class="row backgroundPicHere">
<div class="col-xs-4 col-xs-offset-1 green">
<div class="well">Basic Well</div>
</div>
</div>
</div>
CSS:
.backgroundPicHere {
top: 20px;
height: 200px;
background: red;
}
.green{
background: green;
height: 200px !important;
}
.green .well{
position: relative;
top: 50%;
transform: translateY(-50%);
}
PS. Use any way you deem fitting for the vertical centering of the well. This is just one of many... some might disapprove. DS
EDIT: Correcting code indentation