Home > Mobile >  Why .navbar-dark doesn't work (Bootstrap v5.2)?
Why .navbar-dark doesn't work (Bootstrap v5.2)?

Time:07-15

For some strange reasons that I don't understand, navbar-dark doesn't change text color in the nav. Why it can be so? Thanks in advance!

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  </head>
  <body>
    <nav >Something</nav>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  </body>
</html>

CodePudding user response:

follow the html structure given by bootstrap 5. you need to add navbar-brand class to the text. you can read more here

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  </head>
  <body>
    <nav >
      <span  >Something</span>
  
   </nav>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  </body>
</html>

CodePudding user response:

You probably download some theme from Bootstrap, change the color in CSS.

CodePudding user response:

Yes like the guy above me said, if you downloaded a theme then the proper answer is to change color in CSS class navbar-dark , find where the text line is. I don't know why did he get down voted when it is correct answer 100%, because it's worked for me every time. But w/e.

CodePudding user response:

you must write like this:

<nav >
    <span  >Something</span>
</nav>
  • Related