Clear bootstrap styling for part of a page

Question

I'm trying to setup a preview box for an html editor on one of my pages. I made a standard <div id="preview"></div> style container, in which I occasionally drop my html source, and that works fine enough.

The problem is, bootstrap's styles are seeping into the container and 'poisoning' my preview. I see two solutions to this:

1. Move preview into an iframe
2. Apply some kind of clear/reset css to the element where I host the preview

eg:

<div id="preview" class="clean-css">
</div>

.clean-css {
    div, p: {
        border: 0;
        margin: 0;
    }
    /* a bunch of reset css stuff here */
}

I consider iframe a clunky solution and sort of a last resort. I'd much rather keep my stuff on one page. So I started looking into various reset css stylesheets. Unfortunately, it seems most of them are geared towards equalizing differences between browsers and don't reset all styles to their bare values (for example, blockquote keeps its bootstrap styling).

I can keep googling for a better reset-css stylsheet, or I can try to fill in the holes in the stylesheet I have now. But before that, I figured I should ask more experienced frontend devs what's their experience with this.

• Is there a more comprehensive clear css solution out there?
• Is trying to clear up bootstrap a fool's errand and I should just go with the iframe instead?

Eimile

The Bootstrap CSS only applies to the container. Maybe you can work around it – Demote

I don't understand. What do you mean by container? – Eimile

Related: #45944085 – Eau

Answer 1

After a few months of trying to make reset CSS work, the answer is: just use the &$^* iframe.

There are just too many potential problems and pitfalls, from balancing reset's class precedence to the fact that any CSS will just roll over legacy color / positioning attributes (which are still relevant in email authoring).

iframe is a headache to integrate into the page, but at least you know it can be done, and once it is done, it stays done.

Eimile

Both jsfiddle.net and codepen.io uses "result" iframes, indicating that there indeed is a good reason to do this, because you get a clean and separated environment. If they do it, there's probably a good reason for it. – Ricotta

Hopefully someone sees this and saves themselves some time – Eimile

I really believe someone who are going to do this would try to learn from best practice. It took me just 30 seconds to check out the source on these two pages that already have implemented the functionality that you are trying to achieve ;) – Ricotta