Home/ Questions/Q 8710815
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T04:43:20+00:00

I’m using the basic Twitter Bootstrap .less files as the base styling of a

  • 0

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:

jumbled ReCaptcha

If I go in with the Chrome dev tools or firebug and remove the twitter bootstrap less, I get the expected ReCaptcha:

good 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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve figured it out now… In the custom .less file for our site, we had added the following rule to all table elements to fix the layout on a different table element:

    table th, table td { overflow: hidden; }

    Adding another rule specific to the ReCaptcha generated html resolved the issue for us:

    #recaptcha_table{ table-layout: auto; }
    • 0