How to use grid with bootstrap for form (v3)?

Viewed 49

I'm just starting with the grids used in Bootstrap and I would like my form to look like this using grid, this for my mobile version.

enter image description here

Currently my desktop version is looking like this:

enter image description here

The following is my HTML code with which I build my form, it is made with the help of PHP in a function:

public function userDate(){
        echo '<div>';
        echo '<table class="table">';
        echo '<tbody>';
        echo '<tr>                 
            <td class="columna-titulo">Employee</td><td class="columna-valor">''</td>
            <td class="columna-titulo">Name</td><td class="columna-valor" colspan="2">''</td>
            <td></td>
            </tr>';
        echo '<tr>
            <td class="columna-titulo">Date</td><td class="columna-valor" id="TdFechaIngreso">''</td>
            <td class="columna-tituloYears Old</td><td class="columna-valor">''</td>
            <td class="columna-titulo"Department</td><td class="columna-valor">''</td>
            </tr>';                                        
        echo '</tbody>';
        echo '</table>';
        echo '</div>';        
    }

I am supporting myself with the following documentation but I find a solution Documentation Bootstrap

UPDATE:

Performing the first answer, adding .col-sm-12 still no change is reflected in my form

public function userDate(){
        echo '<div>';
        echo '<table class="table">';
        echo '<tbody>';
        echo '<tr>                  
            <td class="columna-titulo .col-sm-12">Employee</td><td class="columna-valor .col-sm-12">''</td>
            <td class="columna-titulo .col-sm-12">Name</td><td class="columna-valor .col-sm-12" colspan="2">''</td>
            <td></td>
            </tr>';
        echo '<tr>
            <td class="columna-titulo .col-sm-12">Date</td><td class="columna-valor .col-sm-12" id="TdFechaIngreso">''</td>
            <td class="columna-titulo .col-sm-12">Years Old</td><td class="columna-valor .col-sm-12">''</td>
            <td class="columna-titulo .col-sm-12">Department</td><td class="columna-valor .col-sm-12">''</td>
            </tr>';                                        
        echo '</tbody>';
        echo '</table>';
        echo '</div>';
        
    }

You know that I have wrong in my code?

1 Answers

Just add .col-sm-12 to every td you have. for example

<td class="columna-titulo .col-sm-12">

Above is for small devices. For medium devices use .col-md-12 and for large .col-lg-12

Related