Finding the Bootstrap variable that controls a specific CSS rule -

i'm developing application using bootstrap 3. use sass/scss customize bootstrap variables neatly.

i'm styling "tabs" component , can't seem figure out if there specific variable controls text color, or if it's been inherited somewhere else.

what's way determine "source" of css rule comes bootstrap? use chrome on osx.

i inspected tab on bootstrap site , searched .nav-tabs class in bootstrap scss files. in _navs.scss file, search "tabs" , you'll see variables.

it looks $nav-tabs-active-link-hover-color might you're looking - it's active tab's text color. anchors in non-active tabs appear default anchor tag color.

you can find variable in _variables.scss file. variables named according component uses them (i.e. $nav-tabs-active-<whatever>).

  // active state, , :hover override normal :hover     &.active > {       &,       &:hover,       &:focus {         color: $nav-tabs-active-link-hover-color; // ****** here         background-color: $nav-tabs-active-link-hover-bg;         border: 1px solid $nav-tabs-active-link-hover-border-color;         border-bottom-color: transparent;         cursor: default;       }     }