CODEWITHSUNDEEP
htmltwitter-bootstrapcssweb
LorCRess
LorCRess

Reputation: 5

Center input field in bootstrap

This code show the input to the left of div

<div class="col-sm-8 col-md-7" style="min-width: 270px;">
<input type="text" name="address" class="form-control" value="<?php echo$data["address"]; ?>">
</div>

I intent with center and align div and show same. Sorry for the english. Thanks very much. Regards

Upvotes: 0

Views: 7921

Answers (1)

Daniel Hutton
Daniel Hutton

Reputation: 1455

If I understand correctly what you want, then the following should center the input field:

<div class="col-sm-8 col-md-7" style="min-width: 270px;">
<input type="text" name="address" class="form-control" value="<?php echo$data["address"]; ?>" style="margin: auto;">
</div>

By default though, Bootstrap's .form-control fields are set to 100% width so you won't notice any difference. You could add width: 50% for example and then you would see it appear in the center.

Updated answer:

It looks like you need to center the container div rather than the input field. You can use col-md-offset-* to do that:

<div class="col-sm-8 col-md-7 col-md-offset-2" style="min-width: 270px;">
<input type="text" name="address" class="form-control" value="<?php echo$data["address"]; ?>">
</div>

As Bootstrap's grid consists of 12 columns, this won't center it exactly while you are using col-md-7. You would need to use col-md-8 and col-md-offset-2 to make it exactly center.

Upvotes: 1

Related Questions