Using Bootstrap to Arrange Inputs in Rows Or Columns

I have read some user experience articles that stated that it may be easier for humans to read data in columns rather than rows.  Even at work we have some applications that arrange inputs within a form in different ways.  It seems like a simple thing to do, but most of Bootstrap examples all arrange the data in rows.  You can see many of such example, and here is one I put together on plunker.  Resize the screen to see three columns of text input controlls, then tab through the form.  You will see that you are navigating across, then down.

What if we want to navigate down the across?  Basis solution is to create div elements, each containing inputs for a single column.  Then flag entire div with appropriate column size, col-md-4 in my example.  I created multiple groups, each representing a column.  Finally, I put all the groups inside a single div element, decorated with a row class of Bootstrap.  VoilĂ , you have column tabbing now.  Here is plunker for this approach.

Leave a Reply

Your email address will not be published. Required fields are marked *