How to reproduce an existing html design with bootstrap

Question

I am asked to reproduce this design with bootstrap. Original design below

and this is the Html code of the Original design

<style type="text/css">td img {display: block;}</style>

    <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="1280">

      <tr>
       <td><img src="images/decoupes/spacer.gif" width="1" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="684" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="1" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="1" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="97" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="31" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="61" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="83" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="105" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="216" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="1" height="1" alt="" /></td>
      </tr>

      <tr>
       <td colspan="10">





               <img src="moza-slider/sliders/1.jpg" width="1280" height="532">



       </td>
       <td><img src="images/decoupes/spacer.gif" width="1" height="532" alt="" /></td>
      </tr>




      <tr>
       <td rowspan="2" colspan="6"><img name="iimajinnewworkedon_r2_c1" src="images/decoupes/iimajin-new-worked-on_r2_c1.jpg" width="815" height="162" id="iimajinnewworkedon_r2_c1" alt="" /></td>
       <td colspan="3"><img name="iimajinnewworkedon_r2_c7" src="images/decoupes/iimajin-new-worked-on_r2_c7.jpg" width="249" height="1" id="iimajinnewworkedon_r2_c7" alt="" /></td>
       <td rowspan="2"><img name="iimajinnewworkedon_r2_c10" src="images/decoupes/iimajin-new-worked-on_r2_c10.jpg" width="216" height="162" id="iimajinnewworkedon_r2_c10" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="1" height="1" alt="" /></td>
      </tr>
    </table> 

Now in order to use bootstrap and make it responsive, i took the 4 main slice leaving aside the spacer.gif and use them with bootstrap like this

<div class="container">


<div class="row">

<div class="col-md-12  text_blanc"> 



<img src="moza-slider/sliders/1.jpg" width="1280" height="532"> 





 <div class="col-md-6 bg_black text_blanc black_menu_top"> 


   <a class="page-scroll text_blanc" href="#ojm1">HOME</a>


   &nbsp;&nbsp;&nbsp; 

    <a class="page-scroll text_blanc" href="#ojm2">WHO WE ARE</a>

    &nbsp;&nbsp;&nbsp; 

   <a class="page-scroll text_blanc" href="#ojm3">WHAT WE DO</a>

     &nbsp;&nbsp;&nbsp; 

      <a class="page-scroll text_blanc" href="#ojm4">THE PORTFOLIO</a>

      &nbsp;&nbsp;&nbsp; 


      <a class="page-scroll text_blanc" href="#ojm5">THE EVENTS</a>


       &nbsp;&nbsp;&nbsp; 



      <a class="page-scroll text_blanc" href="#ojm6"> REACHING US </a>



        &nbsp;&nbsp;&nbsp; 
</div>

<div class="col-md-3"> 
 <img name="iimajinnewworkedon_r3_c7" src="images/decoupes/iimajin-new-worked-on_r3_c7.jpg" width="249" height="162" id="iimajinnewworkedon_r3_c7" alt="" />
</div>

<div class="col-md-3"> 
<img name="iimajinnewworkedon_r2_c10" src="images/decoupes/iimajin-new-worked-on_r2_c10.jpg" width="216" height="162" id="iimajinnewworkedon_r2_c10" alt="" />
</div>



 </div>


</div> 










</div>

Problem

When I reproduce the design with bootstrap this is what I get

As you can see there is a white space at the bottom right of this meanwhile there is no space on the original design.

Question :

How to make the white space down the image disappear an make it look exactly like the original design like on the image below ?

Here is a demo of the Bootstrap version (the one i have to correct)

Answer 1

First of all you need to put the three bottom columns inside a .row like:

<div class="row">
  col-md-6 bg_black text_blanc black_menu_top>...</div>
  ...
</div>

Then you need to give your image a class. for example .imgFull and add this css rule:

.imgFull { width: 100% }

Answer 2

You can change the fixed width by changing the inline attribute of the img.

As the background image isn't really fitting I would suggest you use a dark color as background and add some opacity as you see fit.

You should change the "width" attribute of :

<img name="iimajinnewworkedon_r2_c10" src="images/decoupes/iimajin-new-worked-on_r2_c10.jpg" width="216" height="162" id="iimajinnewworkedon_r2_c10" alt=""> 

Something around 250 should be close to the original file.

Regards, -Gallo