Daniel Daniel - 2 months ago 18
CSS Question

prevent bootstrap conflict in a child element

I'm using bootstrap for most of the page, but I'd like to use custom css in a

div.col
to get a nicer looking table, but the bootstrap css is affecting some of the styles.

I'd like to reset all the styles for a specific div and it's children.

Are there any ways of dealing with this other than explicitly overloading every style bootstrap uses?

Answer

To reset all the styles for a specific div, you can add the 'all: unset;' CSS property.

<div style="all: unset;">...</div>

This will undo ("unset") all the styles currently applied to that div (but not it's children), leaving you to add which ever ones you desire.

See it in action here (including how to apply to all child elements):

http://codepen.io/esr360/pen/kkogwm?editors=1100#0

This is a bootstrap accordion that has been "unstyled".

View browser support here: http://caniuse.com/#feat=css-unset-value

Unsurprisingly this doesn't work in IE.

Comments