How to convert table based layout with Bootstrap "row" and "col-*-*" - css

Question

I am working on site which is based on table-layout (no div). Now requirement change and has to re-create so that it look responsive, and for responsive we choose bootstrap as option.
Now, How can I convert tables layout into bootstrap grid layout so can 1. look not change, 2. have responsive also.
table-layout is too complex in site. lots of nesting is there. For example:
<table border="0" width='100%' bgcolor='#ff00ff'>
<tr style='padding-bottom:1em;'>
<td>
<table border="0">
<tr valign='bottom'>
<td width='50'> </td>
<td>
<img border="0" src="#" width="100" height="300">
</td>
<td width='25'> </td>
<td>
<span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
</td>
</tr>
</table>
</td>
<td align='right'>
<table border="0" cellspacing="0">
<tr>
<td align='center' colspan='3'>
<span>Another tesing text</span>
<span style='color:#FFFFCC;'> - </span>
<span style='font-size:11px;color:#fffff;'>Random text</span>
</td>
</tr>
</table>
</td>
</tr>
For example how can I convert above code with bootstrap row, col-*-* grid-layout.
Trust me, I tried a lot to convert this, but sometime looks change or some time just not work at all.
General suggestion on how to convert table base layout into bootstrap are also welcome.

Answer 1

Here is some great literature: Bootstrap 3 Grid system
Replace table and tbody with div class="container"
Replace tr with div class="row"
Replace td with div class="col-ww-nn"
Where ww is device width (xs, sm, md, lg)
Where nn is a number 1-12 for width percentage (divided by 12)
Below is your updated code (including some syntax fixes too). Note, I've added responsiveness so that on phones (xs devices) your second main column would be a separate line. And you can make images responsive with img-response so that it's size changes with the device.
<div class="container" style="background-color:#ff00ff">
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="row">
<div class="col-xs-4 col-sm-4">
</div>
<div class="col-xs-4 col-sm-4">
<img src="#" class="img-responsive">
</div>
<div class="col-xs-4 col-sm-4">
</div>
<div class="col-xs-4 col-sm-4">
<span style="font-size:10px;color:#cccccc;">Alpha testing</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="row">
<div class="col-xs-4 col-sm-4">
<span>Another tesing text</span>
</div>
<div class="col-xs-4 col-sm-4">
<span style="color:#ffffcc;"> - </span>
</div>
<div class="col-xs-4 col-sm-4">
<span style="font-size:11px;color:#ffffff;">Random text</span>
</div>
</div>
</div>
</div>
</div>

Answer 2

Actually it is not so complex.
Just skip every <table> and <tbody> tag, treat every <tr> as block element with class="row" and every <td> as block element with class="col-*-*". Nesting Bootstrap grid is totally okey, so if you have somthing like that:
<tr style='padding-bottom:1em;'>
<td>
<table border="0">
<tr valign='bottom'>
<td width='50'> </td>
<td>
<img border="0" src="#" width="100" height="300">
</td>
<td width='25'> </td>
<td>
<span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
</td>
</tr>
</table>
</td>
</tr>
Just do:
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6"> </div>
<div class="col-xs-6">
<img border="0" src="#" width="100" height="300">
</div>
<div class="col-xs-10"> </div>
<div class="col-xs-2">
<span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
</div>
</div>
</div>
</div>
Ofcourse those are just example Bootstrap classes - you don't have to stick with numbers ;)