Bootstrap 4 - Reboot.scss overriding Global.scss

You need to make sure that your stylesheet is linked last in the html file so that it cascades _reboot.scss.

for example you would do:

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" href="styles.css">
</head>

intead of linking bootstrap last so that yours cascades bootstrap


You need to use either specificity or the natural cascade to override the styling from Bootstrap, this is one reason why many people have moved away from these monolithic frameworks as it takes too long to create custom styles when having to overwrite everything from Bootstrap.

For example you could use:

body > div > a {
    text-decoration: none;
}

This might be enough to overwrite the Bootstrap declaration.

Otherwise if you can reorder the styles so your comes after then it may or may not be enough to take precedence in the cascade depending on the specificity of the declaration.


Don't use !important, it will lead to many more issues down the line when you need to add further styling to your links and find that the only way is to add further !importants.


Check out this for more info on how specificity is calculated: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/