Sunday, August 26, 2012

Twitter Bootstrap: Multiple Columns Form Layout Examples

I tried to search Twitter Bootstrap examples for multiple columns form layout. I was surprised that I couldn't found any, so I cook my own and publish my work here. I hope it will save you some times. :)

My work was based on the Twitter Bootstrap's fluid layout example.

First, I try to create the following form layout based on my requirements:
fluid-layout.html




Then, I fill-in the layout columns with form elements/components. Two most common form layouts created for the Person Form: standard form and horizontal form.
fluid-person-form.html (Standard Form)
















fluid-person-horizontal-form.html (Horizontal Form)


















You can download the source code of the examples above at bootstrap-2.1.0-examples.zip.

I hope my sharing is useful to you.

Like this blog?

Thanks for visiting! If you like what you see, I'd really appreciate you linking to it or otherwise sharing it with people you think would find it useful.

21 comments:

Brandon Medina said...

I was looking for such an form as yet working on the same thing. Hope with the help of your source code will be able to deal with these forms successfully.

Lim Chee Kin said...

Sure, do let's me know if you have any problem using it.

Anonymous said...

thank you this helped me :)

Cecilia said...

Thanks for posting, this has been quite helpful. I am working on some project management stuff with my company and I have been researching it to see what I can find. Thanks again!

toninhonunes said...

Thanks for share, it will help me alot.

Anonymous said...

there is a reason to avoid multi column forms. Users forget or skip fields sooner, get confused. see http://baymard.com/blog/avoid-multi-column-forms

Anonymous said...

Perfect. just waht i was looking for. Thanks

Anonymous said...

Thank you. You saved my time.

Jason Farrell said...

You sir are awesome, this just saved me. Thanks so much

Ansuman said...

This is awesome. It helped me a lot. Thank you for posting.

Anonymous said...

Thanks! This is exactly what I was looking for.

Gracie Christina said...

Thanks for sharing, this has been quite helpful. I will like to use it. In web based project management software, all the errors can be removed easily and apart from that you can track and record all of your jobs. Even companies can customize project management software as per their requirements.

Anonymous said...

Thanks. In the fluid-person-horizontal-form.html, the labels overlap the inputs at certain screen sizes. In particular, the Last Name label overlaps the First Name input.

Guilherme Santos said...

genius, thks!!!

chinovader said...

Very clever!
Thanks for sharing!

Ivo said...

Hi, I implemented also this way in my forms, but I was trying to check for a solution as described previous for the problem of "fluid-person-horizontal-form.html, the labels overlap the inputs at certain screen sizes. In particular, the Last Name label overlaps the First Name input.". Unfortunately this example has the same problem that I have, and I'ven't found any solutions yet. If someone have please provide some. Tks anyway.

Anonymous said...

Thanks for sharing!! ;)

Doan Pham said...

thnak you !

دفتر خط خطی said...

Thanks for share, it will help me alot.

Anonymous said...

awesome. you saved my time

Anonymous said...

Very nice. Thank you for taking the time to put this together!