Conflict with bootstrap class .close. #101

elfet opened this Issue Jan 18, 2013 · 18 comments


None yet

It have conflict with Bootstrap class ".close".


Could you be more specific? What is the problem?


Just run into this problem too.

When Rainbow beautifies HTML code it wraps > symbol in a span with a close CSS class. Twitter Bootstrap has this class too, thus beautified code looks like this:



Ah! Interesting. I can update the tags to be something other than open and close but I wonder what other name would be appropriate.

Does Bootstrap define all of their css class rules at the root level? I feel like they should probably have them namespaced like .bootstrap .close or something?


I would argue it is a bug on their end considering they assume that everything with class close should be a close button when in rainbow it is pre .close that would match if you wanted to style it.

That being said, bootstrap is the biggest project on GitHub so it is unlikely that is going to get changed.


I solved it by forking bootstrap add rename .close class.


Is there any patch, I meet the problem too.


Same issue here.


Bootstrap is designed to be very easy to use, that's why they use short class names and presume that everything with close class is a close button.

Since they are not going to change it (probably) and people still have this problem, and rainbow generates it's code, maybe it would be better to change to css classes with rainbow- prefix, for example, like in BEM methodology, to prevent any conflicts?

So it would be rainbow-close


Totally agreed that bootstrap is in the wrong here applying styles to .close but I simply worked around it with my own css. Here it is just in case someone finds it useful: (you may need to tweak it depending on your theme)

.rainbow .close {
    float: none;
    font-size: 13px;
    font-weight: normal;
    text-shadow: none;
    opacity: 1;

Thank you @jblashill


@jblashill 's fix is a decent one, but I'm surprised how this issue lasted for this long. @clexit 's comment on changing the classes to rainbow- is prob the best option. The sad truth of the matter is that many people that will use rainbow, also have bootstrap in some form.


Looks like this thread has died down somewhat, but +1 on rainbow- prefix


👍 on rainbow- prefix but even more so, I think the larger issue at hand is selectors like pre or pre code in the theme CSS files are too loose.

If you use <pre> or <code> outside of rainbow, it will muck up your site styles. Isn't that silly? Seems like rainbow should require being wrapped in a .rainbow selector or utilize Scoped CSS in some way.


The classes that rainbow inserts into the pre tags are crazy common and general. "string", "keyword", "close", "comment". How could these not conflict with other sources, whether its a hugely popular framework or just somebodies little css file?


@kswope it is because I am applying them only inside of a pre tag. Please look at the code before throwing out an accusation 😄


That keeps you from polluting other css, but it does nothing to prevent other css from polluting yours!

Another thing to think about. Some css selectors, like from frameworks like bootstrap, is chosen to be easy for users, so they have priority over css that is inserted into the DOM programmatically. The css inserted by rainbow could have been random strings and it wouldn't even matter.

Now, because it looks like you are taking a stand on principals or something, using rainbow is too hazardous! Every time I add some new css, mine or third party, I have to double check that its not screwing with rainbow.


I used the following, similar to @jblashill

pre .support.close {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-shadow: none;
    opacity: 1;

This will basically inherit, but some inherited stuff might not work and again you will need to override depending on your theme.

@jonmilner jonmilner referenced this issue in PrismJS/prism Mar 31, 2016

Namespace/prefix all the classes? #6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment