How can I center the content of a col-xs-12 column in bootstrap
<p>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 <code>devices &gt; 768 px</code>.</p>

<p>For <code>devices &lt;=768 px</code> I want the button to sit underneath the input box aligned in the center of the col-xs-12.</p>

<p>This is my attempt so far:</p>

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

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

<p>This results in the following correct behaviour on <code>devices &gt; 768</code> pixels:
<a href="https://i.stack.imgur.com/I2uWI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I2uWI.png" alt="enter image description here"></a></p>

<p>However on devices &lt;= 768 pixels the button is not centered but is correctly under the input box:</p>

<p><a href="https://i.stack.imgur.com/hqQEz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hqQEz.png" alt="enter image description here"></a></p>

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

<p><strong>---EDIT---</strong>
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:</p>

<p><a href="https://i.stack.imgur.com/yreJc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yreJc.png" alt="enter image description here"></a></p>

<p>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 &lt;=768 pixels?</p>