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?
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 ConnectWise

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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.