How can I center the content of a col-xs-12 column in bootstrap

Question

I have a input box and a button. I want the button to sit on the right hand side of the input box on all devices > 768 px.

For devices <=768 px I want the button to sit underneath the input box aligned in the center of the col-xs-12.

This is my attempt so far:

<form id="signup-form" class="new_invitation" action="/invitations" accept-charset="UTF-8" method="post">
  <div class="col-sm-4 col-sm-offset-3 input-position">
    <input class="form-control full-width" placeholder="enter email address" id="InputEmail" type="text" name="invitation[recipient_email]">
  </div>

  <div class="col-xs-12 col-sm-2 input-position">
   <input type="submit" name="commit" value="JOIN IN" class="btn btn-cta" id="gabetabtn">
  </div></form>

This results in the following correct behaviour on devices > 768 pixels:

However on devices <= 768 pixels the button is not centered but is correctly under the input box:

How can I center the contents of the col-xs-12 div? I have tried center-block and col-centered bootstrap CSS classes neither of which seem to work?

---EDIT--- If i add text-center to the col-xs-12 div it correctly centers the button element but also centers the button in the col-sm-2 div as well as per this pic:

How can I make the button sit exactly to the right of the input text field, and also centered on the row underneath the input text field when on a device with <=768 pixels?

Answer 1

Add Bootstrap's text-center to the class containing the col-xs-12

So change this line:

<div class="col-xs-12 col-sm-2 input-position">

To this:

<div class="col-xs-12 col-sm-2 input-position text-center">

Answer 2

please add 'text-center' class on your div=col-xs-12

it is default bootstrap class to align element center

<div class="col-xs-12 col-sm-2 input-position text-center">