Styling a bootstrap form

Hi, Please see the form here: http://www.magickitchen.com/gift_certificate-form.html 

I'd like to replicate it here, but I have no idea how to start styling this bootstrap form to look like that.
http colon //dev2.magickitchen.com/gift_certificate-form.html

If you could just point me in the right direction, it would be a big help. Thanks.
Melody ScottAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
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>
RobOwner (Aidellio)Commented:
[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.
Melody ScottAuthor Commented:
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?
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

RobOwner (Aidellio)Commented:
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 :)
Melody ScottAuthor Commented:
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.
RobOwner (Aidellio)Commented:
add "class='well'" to your form
RobOwner (Aidellio)Commented:
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.
Melody ScottAuthor Commented:
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.
Melody ScottAuthor Commented:
And... you're right, that won't work. If you can help, I'd be extremely happy. Thanks.
RobOwner (Aidellio)Commented:
add this css, along with the border images in the attached zip file

#gift_certs_purchase_form {
  background-image: url(border-top.jpg), url(border-right.jpg), url(border-bottom.jpg), url(border-left.jpg);
  background-position: center top, center right, center bottom, center left;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  padding: 30px;
}

Open in new window

borders.zip

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Melody ScottAuthor Commented:
That's pretty wonderful! Could you help me with one more thing? How do I get this all on one line?
screenshot
Thanks!
Melody ScottAuthor Commented:
Wait, I think it's form-inline, I'll work on it, thanks.
Melody ScottAuthor Commented:
Thanks so much!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.