Revolut website tutorial .. button not allowing text color overide when hover

Bootstrap Studio Help
1

Around time 18:10 - Building Revolut's Website in Bootstrap Studio - YouTube where we select primary color for this one button where text turn white when hover.

I set it to primary but the hover cannot override it to turn into white text when hover. It state rule is overriden by .link-primary. This class get added when I select primary color for this one button but hover class is unable to override it with white text.

I went back to beginning and I can’t see what I may have missed. I do noticed there are some new settings in option that wasn’t on the video so I assume Bootstrap Studio setting had some changed made to it on latest version etc.

Screen Shot 2022-10-03 at 3.40.15 PM

2

I already set hover btn always to be white but it still got overridden

Screen Shot 2022-10-03 at 3.44.28 PM
Screen Shot 2022-10-03 at 3.44.28 PM716×438 35.5 KB

3

Did you try adding !important, after the color, in the CSS editor?

4

Did it mentioned to do this in the tutorial? If so then I completely overlooked this in the video.

I’ve done web development for years and you are correct that this would probably fix it but I purchased Bootstrap Studio to compare it with my Pinegrow editor in web development.

I am always looking for better tool to use in my web development especially when more time is saved by drag n drop then selecting options for each components.

5

I’m not sure haha, I didn’t re-watch it. I was just trying to help solve your problem using the solution that I would probably use :slight_smile:

There’s probably an easier way to do this in BSS but I’d have to look on my desktop. Maybe someone else will have a solution for you, in the mean time.

6

I haven’t the time to go through this entire video to see what’s going on here, but I can tell you that setting the button color to primary via the UI is absolutely going to override the color set in the CSS in your image (which is confirmed by the message the software is giving you about the rule being overridden by the .link-primary class), which has the following CSS…

.link-primary {
  color: #0d6efd!important;
}

and

.link-primary:focus, .link-primary:hover {
  color: #0a58ca!important;
}

As you can see, the !important ensures this rule overrides your color: white; rule

My question is, why would you want to the text to turn white when you hover over it seeing as how it’s on a white background? If it turns white, it will effectively disappear! I presume that’s why the tutorial has you set the color to Primary via the UI. So it’s one shade of blue normally, and a slightly darker shade of blue on focus and hover.

1 Like
7

As others have suggested, adding !important to the value should fix it. The issue comes from the Bootstrap version used in the app. The video was made when the latest Bootstrap version was 5.1.3, while the currently included version is 5.2.0.

In Boostrap 5.1.3 the link-[color] classes didn’t use !important:

.link-primary {
  color: #0d6efd;
}
.link-primary:hover, .link-primary:focus {
  color: #0a58ca;
}

…while in Bootstrap 5.2.0 they do:

.link-primary {
  color: #0d6efd !important;
}
.link-primary:hover, .link-primary:focus {
  color: #0a58ca !important;
}

Hope this clears it up!

2 Likes
8

Please show the community your work on creating websites.

9

Since you didn’t go through the video, then you would not understand why. Go through the video and it will answer your question.

10

That make senses … They need to update the tutorial video reflecting this change in the update.

Thank you

11

This post is about the tutorial video, not a website. Read my original post very carefully.

12

No need for me to watch the video now that Gabby has explained the issue.

For whatever reason, Bootstrap 5.2 is using !important on the color rules (which I don’t particularly agree with) but that’s how they’ve chosen to setup the framework.

13

I believe you are correct.

During the time tutorial was created, it was based on previous version of Bootstrap where the color rule was different than it is in 5.X. I was working on a new tutorial and found the other tutorial with the same thing so I had to override it with !important.

But feel kinda of strange overriding !important with another !important thou lol …

Thank you for explaining …