Why are bootstrap columns not aligned?

The following bootstrap code produces this form:

Screenshot-5-11-15--7-00-AM.png
Can anyone tell why the text input columns are not aligned to the right?  I'm using a 12 grid.

Also, when the browser width is decreased, it clips the checkout button.  The form should be fully responsive.

<p><div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div class="row">
                            <div class="col-xs-12">
                                <h5><span class="glyphicon glyphicon-shopping-cart"></span> Shopping Cart</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-xs-6">
                            <h4 class="product-name"><strong>Lesson 1</strong></h4><h4><small>Beginner Lessons</small></h4>
                        </div>
                        <div class="col-xs-4">
                            <div class="col-xs-6 text-right">
                                <h6><strong>97.00 <span class="text-muted">x</span></strong></h6>
                            </div>
                            <div class="col-xs-2">
                                <input type="text" ng-model="lesson1" placeholder="0"  class="form-control input-sm">
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-xs-6">
                            <h4 class="product-name"><strong>Lesson 2</strong></h4><h4><small>Intermediate Lessons</small></h4>
                        </div>
                        <div class="col-xs-4">
                            <div class="col-xs-6 text-right">
                                <h6><strong>97.00 <span class="text-muted">x</span></strong></h6>
                            </div>
                            <div class="col-xs-2">
                                <input type="text" ng-model="lesson2" placeholder="0" class="form-control input-sm">
                            </div>
                        </div>
                    </div>
                    <hr>
                </div>
                <div class="panel-footer">
                    <div class="row text-center">
                        <div class="col-xs-9">
                            <h4 class="text-right">Total <strong>{{lesson1--lesson2}}</strong></h4>
                        </div>
                        <div class="col-xs-3">
                            <button type="button" class="btn btn-success btn-block">
                                Checkout
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div></p>

Open in new window

brettrAsked:
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.

Julian HansenCommented:
Firstly, your columns are setup as

<div class="col-xs-6">
<div class="col-xs-4">

Open in new window

There is an additional 2 columns space to the right that is not being used - you would need to specify your second column as a col-xs-6 (bootstrap works off 12 columns)

Secondly, not sure what you mean about the checkout button being clipped - this only happens when the word "CHECKOUT" is too long for the button and the col-xs-3 it is in. You would need to put a media query in to reduce the font size - or change the length of the word to stop that happening.
0
brettrAuthor Commented:
Thanks on the columns.  That is fixed.

Here's what I mean about the checkout button.

clipped
Isn't bootstrap supposed to handle responsive design?
0
Julian HansenCommented:
Change your col-xs to col-sm

The columns will stack on smaller screens
0

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
brettrAuthor Commented:
Thanks!
0
Julian HansenCommented:
You are welcome - good luck with your project.
0
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
CSS

From novice to tech pro — start learning today.