Styling a bootstrap form

you may even want to print the page and draw your columns and rows. I find this helps.

you're going to have multiple rows each with two columns. Note that unless you specify a col-xs-* class, your form we'll have each label above each form element.

e.g. repeat the following for each row

<form method="post" action="/send.php">
<div class="row">
    <div class="col-sm-4"> label goes here</div>
    <div class="col-sm-8"><input type="..." /></div>
</div>
...
</form>

[quote] Note that unless you specify a col-xs-* class, your form we'll have each label above each form element.[/quote] when viewed on a mobile device of a certain width or smaller.  I've used col-sm-* as it sets the two columns for any width device above mobile devices.  If you want two columns no matter what, then use col-xs-* widths. just bake sure they add to no more than 12 for the row or the elements will wrap to a new line.

also be sure to setup bootstrap as indicated on their website, including the viewport element.

Ok, so you're saying set it up just as it was with the table, but use the bootstrap grid instead. Make sense, I may (probably will) still need your help as I go, if that's ok?

Yep that's how I'd do it and yep keep asking away.If we get too off topic I'll ask you to open another question but so far so good :)

Ok, so now I have this: http://dev2.magickitchen.com/form-test.html

I've tried styling the rows to make them 500px wide, but that isn't doing anything.  How do I get it all to fit into the grey area? Thanks.

add "class='well'" to your form

sorry the previous comment won't work.  The background image you have will not work the way you want because as the screen resizes the image won't and the form will move outside the frame.  If you are intent on having the frame you'll need to break it into pieces or use it as a sprite.  I'll work on a demo to show you what i mean.

Ok, thanks so much. I'd like to keep the frame if possible, and I've done some work on fitting it all in, but I hadn't checked it on mobile yet.

And... you're right, that won't work. If you can help, I'd be extremely happy. Thanks.

That's pretty wonderful! Could you help me with one more thing? How do I get this all on one line?

Thanks!

Wait, I think it's form-inline, I'll work on it, thanks.

Thanks so much!