1

Hi so i'm trying bootstrap,css, and html for the first time and want to change the color of the text on the navbar. I want to change the color of the navbar without using "!important" here's my HTML code:

<html>

<head>
  <html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="cpis.css">

  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-dark">
      <a class="navbar-brand" href="#">Brand testing</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" tabindex="-1">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
    <div class="container-fluid bg-secondary" style="font-size: 20px; font-family: tahoma; color: goldenrod;">
      Test12 12 23
    </div>
    <div class="container-fluid border bg-secondary text-white">
      <button type="button" class="btn btn-success">Exit</button>
      <button type="button" class="btn btn-success">New</button>
      <button type="button" class="btn btn-success">Search</button>
    </div>

  </body>
</html>

here's my css code:

.navbar-brand{
    color: coral !important;
}
.navbar-nav li a{
    color: coral !important;
}

Without using "!important;", the text doesn't change color, and I need to know why is this happening because I'm afraid that it'll be a problem in the future of this code. Thanks in advance!

Chrstian nathanael
  • 13
  • 3
  • 2
    Nearly impossible to tell w/o seeing the rest of your CSS. 99% of the time, it's a specificity issue. Look through your CSS to see where those classes are being styled elsewhere. They most surely are. Check out this doc if CSS specificity is unfamiliar to you: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – Great Scott Oct 25 '19 at 03:47
  • will you please display the html code – PRADEEP GORULE Oct 25 '19 at 03:58
  • I just added the HTML code – Chrstian nathanael Oct 25 '19 at 04:00
  • Learn how to use the tools at your disposal. In this case the developer tools found in most browsers by hitting F12. You can inspect elements on the page, see what styles are being applied and what is being overridden. Using this information you should be able to come up with a more specific selector. – Jon P Oct 25 '19 at 04:12

4 Answers4

1

The problem usually stems from having your css stylesheet before the bootstrap stylesheet. Put your stylesheet after the bootstrap stylesheet.

Kind of like this

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="style.css" rel="stylesheet">

*this is an example so replace whatever bootstrap version you are using

ousecTic
  • 1,895
  • 11
  • 20
0

it is mainly caused due to the arrangement of the link or style tag. if you use style tag before link tag which connects to bootstrap, it will override everything and your style tag will not have any effect on the page. Try writing the script tag, after the link tag

Robin Singh
  • 1
0

You need to use this:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
Pushprajsinh Chudasama
  • 7,772
  • 4
  • 20
  • 43
0

All is fine.

You need to override bootstrap style using same selector in your style sheet as in bootstrap style sheet.

Please try below css.

.navbar-light .navbar-brand, .navbar-light .navbar-nav .nav-link{
    color: coral;
}
Prakash Rajotiya
  • 1,013
  • 5
  • 11