Bootstrap: Reboot.scss overwrote some of my css

[tiagoovieira]

I was taken by surprise by some changes happened to the css of my app, I'm importing v4 via CDN, and apparently reboot.scss broke some of my CSS. Some of my link tags had some styling or the default blue link color but this line imported from reboot.scss

a:not([href]) {
  color: inherit;
  text-decoration: none;
}

changed the styling (my app is in angular, so I don't use href and use ng-click instead, for e.g)

Is there a way to ignore reboot.scss?

[hebbet]

Is there a way to ignore reboot.scss?

build bootstrap from source and don't include it via CDN.

[patrickhlauke]

Fundamentally, an <a...> without an href is a non-focusable placeholder/named anchor. for controls, you should use either proper <a href="#" role="button"> or, even better, <button> elements.

But if for whatever reason you _are_ set on using named anchors, at least ensure that they're keyboard focusable and expose their role as button controls <a tabindex="0" role="button"> and override the reboot styles with your own a:not([href]) { ... } styles

[ramitmathur27m]

Fundamentally, an <a...> without an href is a non-focusable placeholder/named anchor. for controls, you should use either proper <a href="#" role="button"> or, even better, <button> elements.

But if for whatever reason you _are_ set on using named anchors, at least ensure that they're keyboard focusable and expose their role as button controls <a tabindex="0" role="button"> and override the reboot styles with your own a:not([href]) { ... } styles

Thanks It worked for me too!

[scottw-finao]

re: "build bootstrap from source and don't include it via CDN."

Um ok, how??? I see a LOT of people complaining about a tag customizations being squashed by this _reboot thing - why isn't there a version of bootstrap available that avoids this annoying behavior and/or specific instructions somewhere on how to remove it?
I'm getting it on a standard hover that, short of putting a contextual rule for every single use of an a tag to tell it 'turn off the damn underline whenever I use an a inside a div with an li and a ul' that it won't go away. (e.g. a:hover { text-decoration: none; } doesn't work)

[RubyRabelle]

Also totally annoyed by reboot. We don't compile our code and "downloading from source" is still giving me references to reboot.scss

Make it stop!!

[austingriff]

Agreed... annoyed by reboot.. this is an ISSUE.... not sure why this "Closed". Its overwriting my background colors to everything. I upgraded from Bootstrap 3 --> 4 on an existing website and this problem is insanely annoying. Everything in red box below should be white. _reboot.scss is the issue

[whisperV]

Same issue on my end. Reboot's default styling is showing up when I don't expect it to.

Using the source on pages where reboot is causing issues is the only solution I've found so far

[BrutalCSkakan]

Hello. this is a big issue, could it be fixed soon?

[kai452]

Hi everybody,
a Happy New Year !

Had same Problem with
in my html

After I wrote a basic
a {
....
}
in addition to things like
.nav a{
...
}
into my css, the problem was gone.

Hope, it will solve the problem for Your,
Kai

[kingalione]

Why is this issue closed? I have same problems here. _reroot.scss is constantly overwriting my styles.

[GeanCarloV]

I have the same problem, try all the previous solutions but it does not allow me to put my own styles, even if I put it important!

[kevin-poulet]

hi guys, I'm also facing this issue, a workaround working for me is to add ::ng-deep :
::ng-deep a { ... }
hope it can help some people, and there'll be a true solution one day

[patrickhlauke]

the true solution is: don't misuse <a> elements for actual actionable controls. if they're acting as links, they need to have an href attribute. if they're used to act as buttons, they should really be output as <button>, not an anchor element.

[kevin-poulet]

@patrickhlauke actually I think it has nothing to do with the href. I got the issue in an angular project using bootstrap where my anchor's css was ignored, and when inspecting the dom, the style applied came from reboot.
however the ng-deep workaround works for angular project, not sure it was OP's context

[codementation]

Normally I wouldn't comment on an issue closed for this long, but this ranks high on search engines and just wanted to leave a simpe solution for anyone else that stumbles on this. For React or or any SCSS @import use case simply place your custom overrides below the @import and the subsequent stylesheets will "cascade" as desired - effectively overriding _reboot.scss:

e.g.:

// index.scss

// Import bootstrap, anything before this gets overridden by _reboot
@import '../node_modules/bootstrap/scss/bootstrap'; 
// Overrides go here
a {}