bootstrap tabs not showing active when open

I have 4 tab-panes with various content in them. They work fine and they change when I click on them. Although for some reason they are not showing active when I click on them i.e. if I click on "Third Year" the background should change to blue as you can see for this piece of CSS:

.tabs .nav-tabs li.active a {
  color: #fff;
  background: #4582EC;
  border: 2px solid #4582EC;
}

Can anyone see why they are not changing to active when I click on them?

jsfiddle: https://jsfiddle.net/dngpqrwy/