how do i stop the css/js in twitter bootstrap and pdfjs from intefering with each other?

Question

Im trying to integrate an app that uses both pdfjs(viewing pdfs) and twitter bootstrap (providing some u.i. stuff like buttons/tabs) but the two seem unable to play nice on the same page (short of iframes maybe?) each clobers the other's variables with the pdf viewer having elements on the toolbar in the wrong position, and the u.i. provided by bootstrap is messed up. How can i get these two to play nice? i'v tried solution by Andrew Homeyer but it did not work neither did the

<style scoped> 

element, are there other solutions?

EDIT: here is what i mean, (in this example bootstrap is cloberred but pdfjs seems unaffected, im using boostrap from Andrew Homeyer)

versus the way it looks without pdfjs, the tabs work just fine,

here is the code im using for the tabs:

<ul class="bootstrap-scope  nav nav-tabs" data-tabs="boottabs">
    <li class="active"><a data-toggle="boottabs" href="#red" class="bootstrap-scope">Red</a></li>
    <li><a data-toggle="boottabs" href="#orange"  class="bootstrap-scope">Orange</a></li>
    <li><a data-toggle="boottabs" href="#yellow" class="bootstrap-scope">Yellow</a></li>
    <li><a data-toggle="boottabs" href="#green" class="bootstrap-scope">Green</a></li>
    <li><a data-toggle="boottabs" href="#blue" class="bootstrap-scope">Blue</a></li>
</ul>
<div class="bootstrap-scope tab-content">
    <div class="tab-pane active" id="red">
        <h1>Red</h1>
        <p>red red red red red red</p>
    </div>
    <div class="bootstrap-scope tab-pane" id="orange">
        <h1>Orange</h1>
        <p>orange orange orange orange orange</p>
    </div>
    <div class="bootstrap-scope tab-pane" id="yellow">
        <h1>Yellow</h1>
        <p>yellow yellow yellow yellow yellow</p>
    </div>
    <div class="bootstrap-scope tab-pane" id="green">
        <h1>Green</h1>
        <p>green green green green green</p>
    </div>
    <div class="bootstrap-scope tab-pane" id="blue">
        <h1>Blue</h1>
        <p>blue blue blue blue blue</p>
    </div>
</div>

Answer 1

sorry guys i found out that i had some css that was actually interfering with my boostrap tabs not pdfjs,

    button {
            line-height:    normal;
    }
    .hidden {
            display:                none;
    }

    /*
     *      Rules for simulated drop-down/pop-up lists
     */
    ul {
            /* rules common to BOTH inner and outer UL */
            z-index:        100000;
            margin:         1ex 0;
            padding:        0;
            list-style:     none;
            cursor:         pointer;
            border:         1px solid Black;
            /* rules for outer UL only */
            width:          15ex;
            position:       relative;
    }
    ul li {
            background-color: #EEE;
            padding: 0.15em 1em 0.3em 5px;
    }
    ul ul {
            display:        none;
            position:       absolute;
            width:          100%;
            left:           -1px;
            /* Pop-Up */
            bottom:         0;
            margin:         0;
            margin-bottom: 1.55em;
    }
    .ui-layout-north ul ul {
            /* Drop-Down */
            bottom:         auto;
            margin:         0;
            margin-top:     1.45em;
    }
    ul ul li                { padding: 3px 1em 3px 5px; }
    ul ul li:hover  { background-color: #FF9; }
    ul li:hover ul  { display:      block; background-color: #EEE; }