Use of wild card definition in Bootstrap style sheet

This morning I was working on refining presentation of my web application for final release to public. As part of process I am introducing standard libraries like jQuery, Bootstrap, jQuery UI etc. in my application to provide a smooth user interface that works across browsers and devices. After I introduced Bootstrap.css style sheet into my application, on one of the pages, jQuery tab view broke. The inner content of tabs is dynamically refreshed using AJAX requests on a fixed timer. I noticed that inner content of tabs was displaying outside the boundary of tabs container. I had noticed similar behavior during initial development. It was being caused by some floating din in tab container. I had fixed all those issues. It was all working till I started using Bootstrap style sheet. I inspected all elements and there was no element that could break the structure.

After banging my head with this issue, I tried to reproduce the issue by using static content for all tabs. The things were still working fine. Then I started putting class names on each element in the content as was being done by AJAX implementation of my grid UI. Moment I introduced one of the class names, the problem started happening. When I looked at my application's style sheet, I found that I did not even have a style with that name in my style sheet, This was just weird behavior. This is where Chrome browser's Inspect element feature came to my rescue. I found that the effect style being applied ob my div came from bootstrap. My class name was eventspanel. And look at the following wild card definition in Bootstrap.css file.

[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}

Browser applied that style to my DIV because it has word span in it. Once I renamed by class name to eventpanel things came back to normal. Some time regular expression and wild card uses can introduce issues that can be hard to debug.