0

I am trying to center a bootstrap input field within a column div but none of the methods I've tried seems to work.

What I've tried so far:

<div data-role="page" id="add-host" class="container">
      <div class="default-template">
              <h1>Enter the information about the host</h1>
                <div class="col-xs-4 center-block">
                    <input type="date" id="host_name" value="" required="" />
              </div>
       </div>
</div>
1
  • 1
    Have you tried the class text-center?
    – Arun D
    Jun 1, 2016 at 18:05

5 Answers 5

0

There are potentially many ways you could do this: using the grid or with no grid at all, using bootstrap form classes or not. If you're using the grid you should use an offset if possible. Column Offsetting Docs

Working Examples:

/*#4 */

.input-control {
  max-width: 200px;
  margin: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="alert alert-info">#1 Using the Grid with Bootstrap Form Classes</div>
  <div class="row">
    <div class="default-template">
      <h1 class="text-center">Enter the information about the host</h1>
      <div class="col-sm-4 col-sm-offset-4">
        <input type="date" class="form-control" value="" required="" />
      </div>
    </div>
  </div>
</div>

<hr>

<div class="container">
  <div class="alert alert-info">#2 Using the Grid without Bootstrap Form Classes</div>
  <div class="row">
    <div class="default-template text-center">
      <h1>Enter the information about the host</h1>
      <div class="col-sm-4 col-sm-offset-4">
        <input type="date" value="" required="" />
      </div>
    </div>
  </div>
</div>

<hr>

<div class="container">
  <div class="alert alert-info">#3 Not Using the Grid without Bootstrap Form Classes</div>
  <div class="default-template text-center">
    <h1>Enter the information about the host</h1>
    <input type="date" value="" required="" />
  </div>
</div>

<hr>

<div class="container">
  <div class="alert alert-info">#4 Not Using the Grid but With Bootstrap Form Classes</div>
  <div class="default-template">
    <h1 class="text-center">Enter the information about the host</h1>
    <input type="date" class="form-control input-control" value="" required="" />
  </div>
</div>

1
  • using the first one, it worked! seemed the order I put my divs in was also mucking things up.
    – Space Bear
    Jun 1, 2016 at 18:39
0

Can't you just use: center? It is responsible and it centers everything.

<center><input type="date" id="host_name" value="" required="" /> </center>

1
  • it does not, it just puts the <h1> inside the text box and makes a huge mess.
    – Space Bear
    Jun 1, 2016 at 18:31
0

Try this:

<div class="col-xs-4 text-center">
  <input type="date" id="host_name" value="" required="" />
</div>

or

<center>
  <input type="date" id="host_name" value="" required="" />
</center>
4
  • doesn't work, only centers the text inside the button, not the button its self.
    – Space Bear
    Jun 1, 2016 at 18:21
  • try <center><input type="date" id="host_name" value="" required="" /></center>
    – Arun D
    Jun 1, 2016 at 18:22
  • Nope neither worked, using <center> made it an even bigger mess. :/ I'm using jquerry mobile and bootstrap mobile which might be why
    – Space Bear
    Jun 1, 2016 at 18:30
  • I tried both text-center and center. Both works fine for me.
    – Arun D
    Jun 1, 2016 at 18:33
0

Add a custom class, say myClass to your col-xs-4 div like this:

<div class="col-xs-4 center-block myClass">
    <input type="date" id="host_name" value="" required="" />
</div>

Then add this to your css:

.myClass {  
   text-align:center;
}
.myClass input {
   display:inline-block;
}

Link to jsFiddle: https://jsfiddle.net/e0d8my79/119/

0

if you are trying to center the button within the col-xs-4 div, then you should be able to do it by using text-center class (if #host_name has display:inline-block), or using margin:0 auto (if #host_name has display:block)

if you are trying to center the button relative to the whole page, you can try removing the col-xs-4 class then set the div's width to what you need and use margin:0 auto

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.