How to align Google Recaptcha using Bootstrap classes? - html

Question

I have the default register form in ASP.NET MVC5. I have added the Google Recaptcha but it doesn't align with the rest of the form as can be seen in the screen shot below. I have tried many different ways but was unsuccessful. I even looked at Bootstrap Recapture Form Tutorial website to check how they did it. Would anyone please guide me on how I can align the Recaptcha with the rest of the form using Bootstrap classes?
<form action="/Account/Register" class="form-horizontal" method="post" role="form">
<div class="validation-summary-valid text-danger" data-valmsg-summary="true">
<ul>
<li style="display:none"></li>
</ul>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="Name">Name</label>
<div class="col-sm-3 col-md-3 col-lg-3">
<input class="form-control" data-val="true" data-val-length="The field Name must be a string with a maximum length of 255." data-val-length-max="255" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="Email">Email</label>
<div class="col-sm-3 col-md-3 col-lg-3">
<input class="form-control" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Email" name="Email" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="Password">Password</label>
<div class="col-sm-3 col-md-3 col-lg-3">
<input class="form-control" data-val="true" data-val-length="The Password must be at least 6 characters long." data-val-length-max="100" data-val-length-min="6" data-val-required="The Password field is required." id="Password" name="Password" type="password" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="g-recaptcha" data-sitekey="MY_KEY"></div>
<div class="form-group">
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-default" value="Register" />
</div>
</div>
</form>
Screen Shot:
Thank you

Answer 1

To center your google captcha you can apply this:
<div class="col-md-12 text-center">
<div class="g-recaptcha" data-sitekey="MY_KEY"></div>
<div class="form-group">
#if (TempData["recaptcha"] != null)
{
<p style="color:red">#TempData["recaptcha"]</p>
}
</div>
</div>
</div>
And apply css:
.g-recaptcha > div {
margin: 0 auto;
}