Centering Bootstrap input fields - html

Question

I am new with this, especially with Bootstrap. I have this code:
<div class="row">
<div class="col-lg-3">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
I need to put this input field and button in the center of the page:
This didn't work: "margin-left: auto; margin-right:auto;"
Does anyone have any ideas?

Answer 1

You can use offsets to make a column appear centered, just use an offset equal to half of the remaining size of the row, in your case I would suggest using col-lg-4 with col-lg-offset-4, that's (12-4)/2.
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
Demo fiddle
Note that this technique only works for even column sizes (.col-X-2, .col-X-4, col-X-6, etc...), if you want to support any size you can use margin: 0 auto; but you need to remove the float from the element too, I recommend a custom CSS class like the following:
.col-centered{
margin: 0 auto;
float: none;
}
Demo fiddle

Answer 2

Try applying this style to your div class="input-group":
text-align:center;
View it: Fiddle.

Answer 3

The best way for centering your element it is using .center-block helper class. But must your bootstrap version not less than 3.1.1
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-3 center-block">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->

Answer 4

Using offsets is not desired for responsive websites.
Use a flexbox with justify content center:
<div class="row d-flex justify-content-center">
<input></input>
</div>

Answer 5

Ok, this is best solution for me. Bootstrap includes mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. So this worked perfectly on every browser and device:
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-4 -->
<div class="col-lg-4"></div>
</div><!-- /.row -->
It means 4 + 4 + 4 =12... so second div will be in the middle that way.
Example: http://jsfiddle.net/jpGwm/embedded/result/

Answer 6

For me this solution worked well to center an input field in a TD:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<td style="background:#B3AEB5;">
<div class="form-group text-center">
<div class="input-group" style="margin:auto;">
<input type="month" name="p2" value="test">
</div>
</div>
</td>

Answer 7

Try to use this code:
.col-lg-3 {
width: 100%;
}
.input-group {
width: 200px; // for exemple
margin: 0 auto;
}
if it didn't work use !important

Answer 8

Well in my case the following work fine
<div class="card-body p-2">
<div class="d-flex flex-row justify-content-center">
<div style="margin: auto;">
<input type="text" autocomplete="off"
style="max-width:150px!important; "
class="form-control form-control-sm font-weight-bold align-self-center w-25" id="dtTechState">
</div>
</div>
</div>

Answer 9

For bootstrap 4 use offset-4, see below.
<div class="mx-auto">
<form class="mx-auto" action="/campgrounds" method="POST">
<div class="form-group row">
<div class="col-sm-4 offset-4">
<input class="form-control" type="text" name="name" placeholder="name">
</div>
</div>
<div class="form-group row">
<div class="col-sm-4 offset-4">
<input class="form-control" type="text" name="picture" placeholder="image url">
</div>
</div>
<div class="form-group row">
<div class="col-sm-4 offset-4">
<input class="form-control" type="text" name="description" placeholder="description">
</div>
</div>
<button class="btn btn-primary" type="submit">Submit!</button>
<a class="btn btn-secondary" href="/campgrounds">Go Back</a>
</form>
</div>

Answer 10

in b4 you can use d-flex justify-content-center too
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="d-flex justify-content-center">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>