2

I am incorporating bootstrap into my pages, but it's altering some of the spacing in an edge script and some of the borders in my nav menu. I would like to "turn off" bootstrap css styling is some of my div tags. How can I do this? As an example I would like to prevent my local bootstrap css file from styling the following #logo tag:

<head>
  <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
 <div id="logo"> 
  <script type="text/javascript" charset="utf-8" src="logani_edgePreload.js"></script>
  <style>
    .edgeLoad-EDGE-915774383 { visibility:hidden; }
  </style>
    <div id="Stage" class="EDGE-915774383"> </div>
 </div>
</body>
TylerH
  • 20,799
  • 66
  • 75
  • 101
rhill45
  • 559
  • 10
  • 35
  • see this article: [Bringing componentization to the web: An overview of Web Components](https://blogs.windows.com/msedgedev/2015/07/14/bringing-componentization-to-the-web-an-overview-of-web-components/) – Janus Troelsen Jun 20 '16 at 11:54

3 Answers3

4

You cannot. CSS works so that all style sheets that apply to the document apply to it as a whole. The drafted scope attribute of style element may change this one day, but even with it, you would be able to restrict the applicability to a specific element and its descendants, not to exclude.

So if you are using, say, the Bootstrap CSS, you need to deal with. You can inspect (using a browsers developer tools) how it affects a particular element, and then you can override those settings if needed by using rules that “beat” them in the cascade.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
1

Honestly, I think you just have to give more "specifity" to any CSS that you have of your own.

I guess you have any, let's call it "main.css" file where you have your "customized" css. There you can just specify, maybe with !important, the styles you want to keep.

Another option is to do the same I've just said but adding some class to your html that bootstrap is not using, even id.

<head>
   <link rel="stylesheet" href="css/bootstrap.css">
   <link rel="stylesheet" href="css/your-custom-changes.css">
   <!-- see that you are just using the cascade feature of css -->
</head>

What I would do for sure it would be to respect the bootstrap css theme, so you can change it for another one any time you want.

Quoting (What is the meaning of "cascading' in CSS?):

"Cascading" in this context means that because more than one stylesheet rule could apply to a particular piece of HTML, there has to be a known way of determining which specific stylesheet rule applies to which piece of HTML.

The rule used is chosen by cascading down from the more general rules to the specific rule required. The most specific rule is chosen.

Community
  • 1
  • 1
pearpages
  • 18,703
  • 1
  • 26
  • 27
  • that's not a bad idea and doesn't seem to be too much work, my brain was focusing on changing the bootstrap file for whatever reason. I'll keep the question open for a little more to see if there is a command or something that will do this. – rhill45 Jan 17 '15 at 17:18
  • problem with this though is the edge file, they're complicated js files – rhill45 Jan 17 '15 at 17:19
  • just add any css or id's that you need in your html so your styles get precedence over any js change that bootstrap can do – pearpages Jan 17 '15 at 17:22
  • Does the order of the css links in the header determine heirarchy/preference? – rhill45 Jan 17 '15 at 17:25
  • You are supposed to load the css from less specific to more specific. @André Dion is right about apparently not using any bootstrap selector. – pearpages Jan 17 '15 at 17:36
0

You've got some issues here that aren't at all related to Bootstrap. In fact, you're not using any Bootstrap selectors in the markup you've provided.

One issue is that you need to move your <style> block into <head>.

Your second issue is that .edgeLoad-EDGE-915774383 { visibility:hidden; } will not match class="EDGE-915774383". Either change your CSS selector to .EDGE-915774383 or your class to class="edgeLoad-EDGE-915774383".

André Dion
  • 21,269
  • 7
  • 56
  • 60