Through a system of imaginary columns (Grid System) we can divide the screen (or any container) into "x" columns, where "x" normally starts with 12.


Let's see an example with DESKTOP and MOBILE:


<div class="container">

  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

</div>




In the example above, on a DESKTOP screen, we will have three blocks of 4 columns each (4x3=12).

The CSS class used is "col-md-4".



In the example above, on a MOBILE device, we will have three columns with 6 positions each, but the third block is below because the first two have already filled the space (the 12 virtual columns) of the mobile screen (6x2=12), since it is physically smaller.


The CSS class used is "col-6".


For those who are not familiar with HTML and CSS, this may seem (and in a way it is!) quite complex for creating forms.


In the next topic, we will see how everything will be simpler using RadCORE.


Created with the Personal Edition of HelpNDoc: Easily create Help documents