bootstrap 5 and navbar text color-CodePudding

I am very new to coding, trying to design my own navbar using bootstrap. I can change the buttons, the search bars, the background color etc....but for the life of me, cannot select the text color. I feel like I have tried every class and id, still no go. What am I missing? I am not sure which selector to use in CSS in order to override the bootstrap. And yes, my style sheet is after the bootstrap one, as the buttons are being changed.

My navbar is below

<!-- navbar below-->
        <nav >
            <div >
                <a  href="#">Navbar</a>
                <button  type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span ></span>
                </button>
                <div  id="navbarTogglerDemo02">
                    <ul >
                        <li >
                            <a  aria-current="page" href="#">Home</a>
                        </li>
                        <li >
                            <a  href="#">Link</a>
                        </li>
                        <li >
                            <a >Disabled</a>
                        </li>
                    </ul>

form class
                    <form >
                    <input  type="search" placeholder="Search" aria-label="Search">
                        <button  type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>

CodePudding user response：

You can try to to put !important in it like below code and see if that works for you. Let me know.

You can also specify it more using your existing class like li.nav-item > a {color:red !important;}

li a{color:red !important;}

<!-- navbar below-->
        <nav >
            <div >
                <a  href="#">Navbar</a>
                <button  type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span ></span>
                </button>
                <div  id="navbarTogglerDemo02">
                    <ul >
                        <li >
                            <a  aria-current="page" href="#">Home</a>
                        </li>
                        <li >
                            <a  href="#">Link</a>
                        </li>
                        <li >
                            <a >Disabled</a>
                        </li>
                    </ul>

form class
                    <form >
                    <input  type="search" placeholder="Search" aria-label="Search">
                        <button  type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>

CodePudding user response：

Seems to have done a trick...I was just always told never too use important. Thanks!

CodePudding user response：

If you wanted to stick with BS5 utility classes, you could select different colors via class names. https://getbootstrap.com/docs/5.1/utilities/colors/#colors i.e.:

.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50

<!-- navbar below-->
    <nav >
        <div >
            <a  href="#">Navbar</a>
            <button  type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
                aria-label="Toggle navigation">
                <span ></span>
            </button>
            <div  id="navbarTogglerDemo02">
                <ul >
                    <li >
                        <a  aria-current="page" href="#">Home</a>
                    </li>
                    <li >
                        <a  href="#">Link</a>
                    </li>
                    <li >
                        <a >Disabled</a>
                    </li>
                </ul>

              <div >form class</div>
                <form >
                <input  type="search" placeholder="Search" aria-label="Search">
                    <button  type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>