How to add cols on top of image in bootstrap - html

Question

Please i am new to bootstrap. Recently lean the grids etc. I am trying to add controls like a table or on top of an image exactly like the search and the testimonial one here . Just from the example, i dont want by whole site on top the image. Just one row.
<div class='container-fluid'>
<div class='row' style='position:absolute; z-index=-1'>
<img src='images/banner.jpg' alt='Blast off with Bootstrap' />
</div>
<!-- My other controls goes here, example my table etc. -->
</div>
<div class='container'>
<!-- I dont like what ever is in this container to display on top the image above.-->
</div>
When i run my code , everything displays on the image including the second container. Please how do i archive that? Any help is highly appreciated.

Answer 1

check out this code i had provided the working example
<div class='container-fluid'>
<div class='row banner'>
<img src='http://images.visitcanberra.com.au/images/canberra_hero_image.jpg' alt='Blast off with Bootstrap' />
<div class="table-block">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
</table>
</div>
</div>
<!-- My other controls goes here, example my table etc. -->
</div>
<div class='container'>
<!-- I dont like what ever is in this container to display on top the image above.-->
</div>
CSS code :
img{
width:100%;
height:200px;
}
table, td, th {
border: 1px solid #111;
}
table {
width: 400px;
}
.table-block{
position:absolute;
top:25px;
left:25px;
}
.banner{position:relative;}
working example