CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Big Smile
Big Smile

Reputation: 1124

How to align Google Recaptcha using Bootstrap classes?

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:

enter image description here

Thank you

Upvotes: 4

Views: 2631

Answers (1)

Nidhi
Nidhi

Reputation: 1443

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;
}

Upvotes: 1

Related Questions