title: How to convert table based layout with Bootstrap "row" and "col-*-*"
body: <p>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.</p>
  
  <p>Now, How can I convert tables layout into bootstrap grid layout so can 1. look not change, 2. have responsive also.</p>
  
  <p>table-layout is too complex in site. lots of nesting is there. For example:</p>
  
  <pre><code>&lt;table border="0" width='100%' bgcolor='#ff00ff'&gt;
  &lt;tr style='padding-bottom:1em;'&gt;
  &lt;td&gt;
      &lt;table border="0"&gt;
          &lt;tr valign='bottom'&gt;
              &lt;td width='50'&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
                  &lt;img border="0" src="#" width="100" height="300"&gt;
              &lt;/td&gt;
              &lt;td width='25'&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
                  &lt;span style='font-size:10px;color:#cccccc;'&gt;Alpha testing&lt;/span&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/td&gt;
  &lt;td align='right'&gt;
      &lt;table border="0" cellspacing="0"&gt;
          &lt;tr&gt;
              &lt;td align='center' colspan='3'&gt;
                  &lt;span&gt;Another tesing text&lt;/span&gt;
                  &lt;span style='color:#FFFFCC;'&gt; - &lt;/span&gt;
                  &lt;span style='font-size:11px;color:#fffff;'&gt;Random text&lt;/span&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <p>For example how can I convert above code with bootstrap <code>row</code>, <code>col-*-*</code> grid-layout.</p>
  
  <p>Trust me, I tried a lot to convert this, but sometime looks change or some time just not work at all.</p>
  
  <p>General suggestion on how to convert table base layout into bootstrap are also welcome.</p>