How to convert table based layout with Bootstrap “row” and “col-*-*”

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

Answer 1

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'>&nbsp;</td>
            <td>
                <img border="0" src="#" width="100" height="300">
            </td>
            <td width='25'>&nbsp;</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">&nbsp;</div>
            <div class="col-xs-6">
                <img border="0" src="#" width="100" height="300">
            </div>
            <div class="col-xs-10">&nbsp;</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 ;)

Answer 2

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">
                    &nbsp;
                </div>
                <div class="col-xs-4 col-sm-4">
                    <img src="#" class="img-responsive">
                </div>
                <div class="col-xs-4 col-sm-4">
                    &nbsp;
                </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>