CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
RenegadeAndy
RenegadeAndy

Reputation: 5690

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

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: enter image description here

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

enter image description here

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:

enter image description here

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?

Upvotes: 5

Views: 11314

Answers (3)

Ashvin Jadav
Ashvin Jadav

Reputation: 134

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">

Upvotes: 4

royketelaar
royketelaar

Reputation: 1439

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">

Upvotes: 6

David Wilkinson
David Wilkinson

Reputation: 5118

Try the following example:

https://jsfiddle.net/7frqL6rv/1/

CSS:

@media (max-width: 767px) {
  .input-position input {
    margin: 0 auto;
    display: block;
  }
}

For viewports <= 767px, the input is set to display as block and auto margins on the left / right - meaning it centers to it's 100% width parent <div> of class input-position in this case.

Upvotes: 3

Related Questions