Help making responsive boxes with bootstrap

I am looking to create 3 boxes, with a button option to select what to pay.  Could someone lead me in the right direction on how to create the boxes similar to the attachment.   I need these to stack when viewed on a phone.  I do have bootstrap installed and am using it in other parts of the program.

Payment-Sample.png
mgmhicksAsked:
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.

Russ SuterSenior Software DeveloperCommented:
Bootstrap actually does this very well using row and col- classes. The col dimension is separated into 12ths and Bootstrap has predefined media query breakpoints.

Here's a jsfiddle demonstrating.

http://jsfiddle.net/qfmbp6ks/

NOTE: div border added for demonstration visibility.
mgmhicksAuthor Commented:
How can I keep the sizes to be so big when on desktop and also 3 across on a phone.   So the boxes are always the same size regardless of what text is in the box.  Want something similar to picture I sent/

Picture of what I would like to do.
Russ SuterSenior Software DeveloperCommented:
You want the text boxes to always be the same size regardless of viewport size? That's a departure from responsive design but it can be done using media queries and breakpoints. You wouldn't use Bootstrap for this since Bootstrap would follow all the responsive guidelines.

Try this:

http://jsfiddle.net/qfmbp6ks/1/
OWASP: Avoiding Hacker Tricks

Learn to build secure applications from the mindset of the hacker and avoid being exploited.

mgmhicksAuthor Commented:
I'm sorry I meant I want them all to stay the same size in realation to each other, not in relation to the view point size.  Mine seem to change size, 1 may be wider than the other based on the text inside the box.
Russ SuterSenior Software DeveloperCommented:
Ah. I think I understand now. It would seem your content is either forcing the container to widen or the content is overflowing.

http://jsfiddle.net/qfmbp6ks/2/

Can you provide an example of what you're doing so I can dissect and fix it?
mgmhicksAuthor Commented:
Here is the code I have so far and what it looks like.  I am fine with the full screen, but when we go to phone size, I need them stacked or all across just sdesktop viewphone viewmaller.

thanks
Russ SuterSenior Software DeveloperCommented:
So what's happening there is your input box is forcing the container to remain large enough to encompass it. That should be solvable by adding class="form-control" to the input element.

http://jsfiddle.net/qfmbp6ks/3/

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
mgmhicksAuthor Commented:
thank you
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
Microsoft Excel

From novice to tech pro — start learning today.