CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
user3104537
user3104537

Reputation:

How to prevent bootstrap from removing my styles?

I have a simple div for which I load html content with jquery method load(). This content uses bootstrap tab panes. In it's simple form it is something like that:

<div id="div-loaded">   -- the content of this div was loaded
<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class="active">
            <a data-toggle="tab" href="#tab-1">Tab 1</a>
        </li>
        <li>
            <a data-toggle="tab" href="#tab-2">Tab 2</a>
        </li>
        <li>
            <a data-toggle="tab" href="#tab-3">Tab 3</a>
        </li>
    </ul>
<div class="tab-content">
    <div id="tab-1" class="tab-pane active">
        <table class="table-mytableclass">  --- this class gets overwritten by it self
            <tbody>
                <tr>
                    ... some table content
                </tr>
            </tbody>
        </table>
    <div>
    ... other tabs

The problem is that the correct style class is applied for only for a fraction of a second and then it is changed back to bootstrap defaults. If I (in FF) select context menu option reload CSS, there is again this fraction od a second and then my style get changed to bootstrap default. Why does this happen? How can one prevent this? How does one change a look of content? And a side question? In tab in my listing above, this is copied form an example found on net, is it mandatoray to have a tag inside

  • item?

    Additional info: - cannot reproduce in jfiddle. - if i force inline style it works. As if class is somehow "removed".

    Upvotes: 0

    Views: 524

    • Answers (1)

    Joseph Dailey
    Joseph Dailey

    Reputation: 4925

    Your bootstrap styles are taking priority over your styles.

    The order goes, I believe:

    1. inline styles: style="key:value;"
    2. !important modified: key:value!important;
    3. by selector specification: #id is more specific than .class
    4. Order of reference: the latest style takes priority

    So in your case I, without seeing the HTML, believe you have placed the bootstrap link after your own styles link.

    Upvotes: 1

    Related Questions