Menu
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.
420
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.
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.
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.
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
div class="container" div class="row" div class="col-ww-nn" ww is device width (xs, sm, md, lg)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> 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 ;)
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With