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

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.

    

        

            

                

                     
                
                

                    
                
                

                     
                
                

                    Alpha testing
                
            
        
        

            

                

                    Another tesing text
                
                

                     - 
                
                

                    Random text