Overriding Bootstrap Navbar Classes - Wont Work

Alright, so I am having issues overriding some of bootstraps navbar classes. I'm not sure but it works if I use !important but I'd rather avoid that at any cost. So here is my html

Solution 1:

EDIT:

This approach is dealing with overwriting specificity issue, as you are overwriting the style provided in _reboot.scss(which is part of bootstrap)

Hence, this is one of solution to achieve, what you are trying to achieve, your solution must be another way of dealing with this problem.

Example which changes those li without href

.navbar.navbar-nava:not([href]) {
  color: red;
}

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css"  /><navclass="navbar navbar-default"role="navigation"><ulclass="navbar navbar-nav"><li><a>Actions</a></li><li><a>Profile</a></li><li><a>Kingdom</a></li><li><ahref="#">Inventory</a></li><li><a>Alliance</a></li><li><a>Mail Box</a></li><li><ahref="user/logout">Logout</a></li></ul></nav>

In the below example if you use .navbar .navbar-nav a, it will just change those a with are having href.

.navbar.navbar-nava {
  color: red;
}

.navbar.navbar-nava {
  color: red;
}

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css"  /><navclass="navbar navbar-default"role="navigation"><ulclass="navbar navbar-nav"><li><a>Actions</a></li><li><a>Profile</a></li><li><a>Kingdom</a></li><li><ahref="#">Inventory</a></li><li><a>Alliance</a></li><li><a>Mail Box</a></li><li><b><ahref="user/logout">Logout</a></b></li></ul></nav>