I'm trying to create a centralized login form, but with the code below the input text is aligned to the left and the icon to the right:
<div class="form-group">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="input-group">
@Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "E-mail" })
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
</div>
</div>
</div>
</div>
The input size is set to 280px (bootstrap default in the Site.css file) and I would not like to change it. See the image below the result, I would like to know how to add the input and the icon, and that the two would be in the center of the column.
Iwasabletoimplementitasfollows:
<divclass="form-group">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div align="center">
<div class="input-group" style="max-width: 280px">
@Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "E-mail" })
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
</div>
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>