Skip to content Skip to sidebar Skip to footer

CSS - See What Styling Bootstrap Has Applied To Element

I have this footer and a logo that works fine without bootstrap, but bootstrap is just messing it up. I can't find whats wrong, because I don't know what bootstrap applied to the e

Solution 1:

You have the override the governing style rule. Follow these simple ways, you can use Google Chrome to find out the inherited styles:

  1. Open the URL in the browser.
    open url
  2. Right click and select inspect on the Inspect.
    inspect
  3. On the right side, click on the computed.
    computed
  4. You will be able to see from where it's inherited.
    inheritance

In the above example, check out the font-size and font-weight. There are so many inherits. Hope this was helpful.


Solution 2:

CSS is hierarchical, meaning the styles from the firstly included CSS file gets overwritten with a secondly included file, if both have definitions for the same tag/class/id.

Add bootstrap as the first include CSS in your head of the document and then include your custom CSS files.

This should solve most clashing CSS styles automatically.


Post a Comment for "CSS - See What Styling Bootstrap Has Applied To Element"