'Bootstrap 4 - Reboot.scss overriding Global.scss

I am using Sage Starter Theme and I am adding some CSS to style the links globally in the _global.scss file. Some of the CSS properties are being overridden by Bootstrap, from the file _reboot.scss.

_global.scss

This styling adds a basic underline on hover effect to all my links.

a {
    font-family: $font__lato !important;
    text-decoration: none;
    color: brown;
    position: relative;
    overflow: hidden;

    &:focus {
        outline: none;
    }

    &:after {
        content: "";
        position: absolute;
        z-index: -1;
        right: 0;
        width: 0;
        bottom: -5px;
        background: red;
        height: 2px;
        transition-property: width;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
    }

    &:hover:after,
    &:focus:after,
    &:active:after {
        left: 0;
        right: auto;
        width: 100%;
    }
}

_reboot.scss

As shown in the following image _reboot.scss is taking priority over my own CSS.Image

What is the correct way to apply my own styling of text-decoration: none; without using !important or editing _reboot.scss directly?

Thanks for the help.

csssassbootstrap-4


Solution 1:[1]

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/

Solution 2:[2]

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

Solution 3:[3]

If I could have commented on the answer above I would have (not enough reputation yet).

Thanks to Alex (above) for your answer! It was really helpful. My situation, while very similar, was different and required a little bit of finessing. This is often a challenge as older answers become outdated as things evolve.

To build on the above (nearly 4 year old) correct answer I discovered this issue with Bootstrap 5 as well. Alex makes a great point about utilizing monolithic frameworks such as Bootstrap. However, with few resources in a development effort there are trade offs that sometimes have to be made. I'm using Bootstrap as a solitary developer until a better solution presents itself.

I was trying to override the colour of a link and could not get the local css styles to override _reboot.scss.247. And I certainly did not want to resort to !important!

While troubleshooting this I went through a number of iterations until I found the solution:

  • I tried an #id style on the anchor tag
  • As per Alex's suggestion I tried to add a class style to each tag, including Body.
  • However, since I was trying to change a heading hyperlink to be the same color as regular headings (a conscious choice) that also changed the color of text as well (even though I was specifying :hover, :visited, and :link).
  • In the end what worked was adding the class to every style, except to body. The code is below...

css snippet:

.heading-link:link, .heading-link:visited {
        color: #2C4D5C;  /* From the theme's colour palette */
    }
    .heading-link:hover {
        color: #E0E0E0;  /* From the theme's colour palette */
    }

html snippet (this is from a Django template, so some of this code may not suit your context) The point of emphasis is the use of the heading-link class in the various tags below body, thus expanding upon Alex's answer above:

<body>
<!-- other html code -->
    <section class="container-fluid px-0 padding-above-articles-header heading-link" id="article-header">
        <div class="text-center d-block">
            <img src="{% static 'articles/images/Collab-Map-Flat-wide-3272-252-blur-inner.jpg' %}" alt='Article-banner'>
        </div>
        <div class="container-xl article-header-container heading-link">
            <div class="heading-link">
                <div class="row heading-link">
                    <div class="col-lg-8 col-md-10 mx-auto centred-text heading-link">
                        <h1 class="centred-text display-4 heading-link"><a class="heading-link" href="{% url 'articles_home' %}">Articles</a></h1>
                        <div class="padding-above-element-double">
                            <div class="padding-above-element-double">
                                <h6>Breakthrough Inspiration...</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
<!-- other html code -->
<body>

Conclusion: A part of me feels a bit uncomfortable that I've failed from a DRY perspective. However, without repeating the inclusion of this style class into every tag within the html hierarchy I simply could not get the effect I wanted. I've not looked at the _reboot.scss file as yet (another trade off given the to do list I have) so I can't speak to cause (nor do I have the experience to consider myself even remotely close to an authority on this topic). However, the ultimate result was that this solution worked, and was a great example of how Stack Overflow can be very helpful in dealing with the nichest of niche-cases. :)

Solution 4:[4]

This is an old question but comes high on Google so I thought I'd add my work around.

Add ids or custom-class names to your objects.

For example:

html,body{
    color:#222;
}

will not work and will get overridden by _reboot.scss. However, if you give an id to html of my-html and body my-body then this will work:

#my-html,#my-body{
    color:#222;
}

NOTE: I'M USING REACT-BOOTSTRAP SO THIS MAY NOT BE TRUE FOR NATIVE BOOTSTRAP

Solution 5:[5]

Step 1: Go to Global style.scss file Step 2:

  @import "~bootstrap/scss/bootstrap.scss";
   a{
        text-decoration:none;
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2 Rumba
Solution 3
Solution 4 Robert Franklin
Solution 5 Dipankar Borah

Related Questions