-1

I wanted to change a button background color in a bootstrap navbar but it was not change completely. What should I have to do?

Here is the code:

<div class="container-fluid">
    <nav class="navbar navbar-dark navbar-expand-lg bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand bg-success" href="#" id="logo">Logo</a>
            ...
        </div>
    </nav>
</div>

and this is the output.

Fatemeh Rashidi
  • 1
  • 1
  • What do you mean with 'was not change completely'? Have you try to inspect the element? please provide your css in [mcve] – Sfili_81 Sep 07 '22 at 06:32
  • See my recent answer about compiling and integrating with bootstrap sass https://stackoverflow.com/a/73114678/3807365 – IT goldman Sep 07 '22 at 06:38

2 Answers2

0

If you want to change the green background color from your logo you need to remove

bg-success

class form this code

<a class="navbar-brand bg-success" href="#" id="logo">Logo</a>

bootstrap provides many classes for buttons you can use any of them according to your project branding, types are

btn-primary
btn-secondary
btn-success
btn-danger
btn-warning
btn-info
btn-light
btn-dark
btn-link
Hitesh Kumawat
  • 11
  • 2
0

If you want your color background more predominant then make use of the attributes mentioned below in this tag:

<a class="navbar-brand bg-success" href="#" id="logo">Logo</a>

.bg-primary: This sets the color to the primary color.
.bg-secondary: This sets the color to the secondary color.
.bg-success: This sets the color to the success color.
.bg-danger: This sets the color to the danger color.
.bg-warning: This sets the color to the warning color.
.bg-info: This sets the color to the info color.
.bg-light: This sets the color to the light color.
.bg-dark: This sets the color to the dark color.
.bg-white: This sets the color to the white color.
.bg-transparent: This sets the navbar to be transparent.
Naser Fazal khan
  • 112
  • 5