0

I would like to include a big <div> inside the <div class="jumbotron"> as seen below, but it should not inherent the CSS styles from the parents.

<div class="container">
  <div class="jumbotron">
HTML chunk here that should not inherent from parents
  </div>
</div>

Here is the big html chunk that is rendered correctly and here when it have been included in the Bootstrap template, where the font sizes and more are messed up.

Question

Is it possible to include the html chunk with it inherent any CSS styles from the parents?

Jasmine Lognnes
  • 6,597
  • 9
  • 38
  • 58
  • 1
    Why are you placing the content *inside* the jumbotron if you do *not* want to let it inherit styles? The whole purpose of wrapping something in a jumbotron *is* to style it in a certain way... – Jeroen Apr 23 '15 at 15:40
  • 1
    Please edit your Fiddles to only show the code that's relevant to your question with better formatted CSS. – Shaggy Apr 23 '15 at 15:42
  • 5
    I think this link should answer your question: http://stackoverflow.com/questions/958170/how-do-i-prevent-css-inheritance... In short: you have to override any attributes you set in the parent. – Joshua Kemmerer Apr 23 '15 at 15:42
  • As @Shaggy, mentioned. The fiddle's you provided are not particularly useful. Also you might want to mention what sizes are expected or a screenshot of what type of look / layout you are going for. And you should try to minimize your examples to small specific problems. http://stackoverflow.com/help/mcve – khollenbeck Apr 23 '15 at 15:57
  • 1
    may be put it in iframe sandbox – YOU Apr 23 '15 at 16:14

1 Answers1

1

Some ways to work with or prevent CSS inheritance:

  1. The most obvious way would be to remove the jumbotron css and write your own.

  2. Secondly, you could try to change the CSS to be more specific. For example using advanced css selectors IE: .jumbotron > .childClass. Or stuff like + :not() :first-child :last-child (and others). Depends on your use case. See advanced selectors.

Or if you don't want to modify or change the CSS of the parent class. Then another option would be to override it with a higher parent. For example...

<div class="jumboTronParent">
  <div class="container">
    <div class="jumbotron">
      <div class="myChildClass"></div>
    </div>
  </div>
</div>

.jumboTronParent .jumbotron > .myChildClass {
  font-size:1em;
  // applies font style to just first level children with this class
}

.jumboTronParent .jumbotron .myChildClass {
  font-size:1em;
  // applies font style to all children with class
}
khollenbeck
  • 16,028
  • 18
  • 66
  • 101