change background color of a button in bootstrap 5 navbars-CodePudding

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 >
    <nav >
        <div >
            <a  href="#" id="logo">Logo</a>
            ...
        </div>
    </nav>
</div>

and this is the output.

CodePudding user response：

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

bg-success

class form this code

<a  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

CodePudding user response：

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

<a  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.