<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 class="prettyprint"><code><table border="0" width='100%' bgcolor='#ff00ff'> <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> <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> </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>

<p>Here is some great literature: Bootstrap 3 Grid system</p> <ul> <li>Replace table and tbody with <code>div class="container"</code> </li> <li>Replace tr with <code>div class="row"</code> </li> <li>Replace td with <code>div class="col-ww-nn"</code> <ul> <li>Where <code>ww</code> is device width (<code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>)</li> <li>Where <code>nn</code> is a number 1-12 for width percentage (divided by 12)</li> </ul> </li> </ul> <p>Below is your updated code (including some syntax fixes too). Note, I've added responsiveness so that on phones (<code>xs</code> devices) your second main column would be a separate line. And you can make images responsive with <code>img-response</code> so that it's size changes with the device.</p> <pre class="prettyprint"><code><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> </code></pre>

<p>Actually it is not so complex. </p> <p>Just skip every <code><table></code> and <code><tbody></code> tag, treat every <code><tr></code> as block element with <code>class="row"</code> and every <code><td></code> as block element with <code>class="col-*-*"</code>. Nesting Bootstrap grid is totally okey, so if you have somthing like that:</p> <pre class="prettyprint"><code><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> </code></pre> <p>Just do: </p> <pre class="prettyprint"><code><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> </code></pre> <p>Ofcourse those are just example Bootstrap classes - you don't have to stick with numbers ;)</p>

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

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'>&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> <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.

How do I make 3 columns in Bootstrap 4?

Three Equal ColumnsUse the . col class on a specified number of elements and Bootstrap will recognize how many elements there are (and create equal-width columns). In the example below, we use three col elements, which gets a width of 33.33% each.

How do I split a row into 5 columns in Bootstrap?

You can use the row-cols-* (eg: row-cols-3 , row-cols-md-3 ) class for your requirement. Show activity on this post. You can use bootstrap-4 default 'col' property to solve this issue. This will auto divide the given space into 5 equal parts.

How rows and columns work in Bootstrap?

The grid system of Bootstrap 4 allows you to divide a row into 12 columns of equal width. However, these columns can also be combined to create columns that are wider and positioned differently. The grid can also be responsive and rearrange depending on the screen width or window size.

How do I make 5 columns in Bootstrap 4?

Populate the 'row' div with 5 divs with class 'col'. Because Bootstrap 4.0+ grid system has now shifted to Flexbox, the columns will arrange by themselves into five equally sized DOM elements.

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>

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 ;)

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

Tags:

css

html-table

twitter-bootstrap

Kiran

People also ask

2 Answers

Adam Milecki

jazzgot

Recent Activity

Donate For Us