Indie-Resource.com

I'm trying to use a Bootstrap checkbox in a C# ASP.NET MVC generated web page.

The box is supposed to display the checkbox, with a label of "admin" to the right of it. But when it displays on the page, it looks like this:



I've been digging through Bootstrap .less files and just can't see where this problem is coming from. Anyone hit it before?

It looks to me like there is an errant margin in there somewhere, maybe a left one.

Use Chrome Developer Tools to drill into what CSS rules are affecting it (Ctrl+Shift+J >> Elements tab >> select the markup of the checkbox >> Styles window on the right) and then work backwards into VS to find the rule where you can edit it.

Apparently it's an issue with Bootstrap 3.2.0. I went back to 3.1.1 and the problem went away.

Interesting. I would still assume it would be a CSS issue that could be resolved, though. But rolling-back and moving on may be your best bet.

Looking through CSS compiled from SCSS is a nightmare. You need to look at the SCSS source and use compass to compile it to CSS.

Jackolantern wrote:Interesting. I would still assume it would be a CSS issue that could be resolved, though. But rolling-back and moving on may be your best bet.

I hit this while following along with some video tutorials, so a rollback is easiest. If it was my own project I'd probably dig into it and see what was up.

One of the BIGGEST pit falls to bootstrap is all the changes they have done. We use to use span but then they change them to col-md-4 and all that which destroyed sites. Everyone had to migrate. I still haven't migrated some of my sites. Doing it slowly. So I often stay away from the latest releases of bootstrap.

Refactoring Halls! In Netbeans you press ctrl+r and it does the rest for you

this week is one of those weeks where I answer everything in images.

I have had those kinds of weeks before