Make element skip Bootstrap CSS

Question

I am trying to create a DIV generator using PHP, jQuery and Bootstrap for the dashboard. In the dashboard I have some inputs and, using jQuery, I am manipulating the style and the content of the DIV based on the input values, so it displays a preview of the DIV before passing the values to PHP. The problem is that Bootstrap puts some of its own CSS on my div and it doesn't look like the end result.

How it looks on a non-Bootstrap page:

without Bootstrap

How it looks on the dashboard:

with Bootstrap

Here is the CSS of the DIV (apart from what's already in the style attribute:

.rectangular{
    float:left;
    width:40%;
    padding-left:10%;
    padding-bottom:25px;
}

.rectangular_1 {
    height: 10px;
    position: relative;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width: 100%;
    -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
    -moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
    box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
}

.rectangular_1 > span {
    display: block;
    height: 100%;
    -webkit-border-top-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    -moz-border-radius-topright: 2px;
    -moz-border-radius-bottomright: 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    background: rgb(122,188,255);
    position: relative;
    overflow: hidden;
}

.spoll { -webkit-box-sizing: border-box;;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    padding-top: 5px;
    }

And the HTML:

<div class="spoll" style="width: 300px; border: 1px solid #0099cc; border-radius: 0px; color: #0099cc; background-color: #FFF;">
  <p id="prevTitle"><b>Do you wanna' have some fun?</b></p>
  <p id="prevTopic" style="font-size: 13px;"></p>
  <p>First</p>
  <div class="rectangular_1" style="border: 1px solid #6699CC"> <span style="width:60%; background: #6699CC"></span> </div>
  <p>Second</p>
  <div class="rectangular_1" style="border: 1px solid #6699CC"> <span style="width:60%; background: #6699CC"></span> </div>
  <p>Blah</p>
  <div class="rectangular_1" style="border: 1px solid #6699CC"> <span style="width:60%; background: #6699CC"></span> </div>
  <br>
  <br>
  <input id="submit" name="submit" type="submit" value="Vote" style="border-radius: 5px; border: none; padding: 10px; width: 100%; margin: auto; background-color: #0099cc; color:#FFF;" />
</div>

I can't use an IFrame because I need to update the DIV with the form values, so... any suggestion?

I've tried to use the selected answer from here inside the header after the Bootstrap's css <link src=""> part and before the CSS I've shown you, but it didn't work.

You simply need to increase the priority of your selectors so that they override Bootstrap's. Often, simply adding `body ` in front of each does the trick. — isherwood, Feb 02 '15 at 17:36
It could also be a matter of load order. Make sure your CSS loads after Boostrap. It seems to work here: http://jsfiddle.net/isherwood/xaj2svdc — isherwood, Feb 02 '15 at 17:37

score 1 · Answer 1 · answered Feb 02 '15 at 17:48

You can give your div container an ID. Then, you the ID before each selector. This makes your css rules more specific than the ones from bootstrap. Because the browser uses the most specific ones found, yours get used then.

However this does not disable css properties set from bootstrap, but not from your code. To remove such ones, you have to implement them in your code. Sincerely, I know no solution to get the default property of the page without bootstrap, so you have to adjust the values for each page.

Last you have to consider, that the solution using IDs produces just valid code if each of your pages contains maximum one container with this ID. If you have more containers, you need unique IDs for each one.

This solution can also be done using classes. In this case, you have to try if it works for your page.

Another solution is using the !important mark at your css rules instead of adding classes or IDs. If you know why you use important and it is not only a bugfix for another bad css rule, it's not even bad style. If you use !important, it is always a good idea to add a comment why you use it, so that other developers (or you later) don't wonder about it or remove it accidentially.

Make element skip Bootstrap CSS

1 Answers1