Space Bear Space Bear - 6 months ago 115
jQuery Question

Center bootstrap col-xs-* class (centering bootstrap fixed width input bot)

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>

Answer

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>