Menu
I'm using the basic Twitter Bootstrap .less files as the base styling of a ASP.NET MVC4 website. I've added a ReCaptcha to a registration page, using the Microsoft.Web.Helpers.ReCaptcha class. Simplified example:
<head>
<link rel="stylesheet/less" href="@Url.Content("~/scripts/less/style.less")" />
</head>
@ReCaptcha.GetHtml()
The result looks like this:
If I go in with the Chrome dev tools or firebug and remove the twitter bootstrap less, I get the expected ReCaptcha:
Of course, this nukes all the other styling of the site, which is not desirable. Has anyone else experienced this, and are there any solutions, short of manually changing the bootstrap classes to add exceptions for the ReCaptcha classes?
223
This is what fixed it for me. Using Bootstrap 2.3.2 in a MVC 4 web app. I added the following css after all other CSS.
.recaptchatable * {
border: 0 !important;
}
body {
line-height: normal !important;
}
I like meffect's answer here but as I'm using scripted css files that changes my other layouts in bootstrap. Making a slight change and moving the line-height property inside .recaptchatable solved it for me:
.recaptchatable * {
border: 0 !important;
line-height: normal !important; }
May help someone.
42
answered Apr 21 '26 18:04
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With