Twitter Bootstrap Question posted in

How do I change the colour of the text in this navbar in Bootstrap?-Twitter bootstrap

How do I change the colour of the text in this navbar in Bootstrap?

I’d like to only make the nav-links purple and not the main title on the left.

Code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Animal Shelter Website</title>
  <link rel="stylesheet" href="style1.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css'>
  <link rel="stylesheet" href="./style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="index.js"></script>
</head>
  
<body style="background-color: black">
  <nav class="navbar navbar-expand-xl navbar-dark">
    <a class="navbar-brand" href="#">Animal Shelter Website</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>
  
<body id=main-navbar">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item nav-item-border">
          <a class="nav-link active" href="index.html">HOME</a>
        </li>
    </div>
  </nav>
  <hr>```
Tags:

3

Answers


  1. 0

    You can use simple CSS!


    Add 

    <style>
a:link {
  color: ANYCOLOR;
}

a:visited {
  color: ANYCOLOR;
}
</style>

    To learn more, go to this link

    Login or Signup to reply.
  2. 0

    You can add a new css style sheet that overrides the class nav-link with a different color.

    You may have to use !important.

    .nav-link {
 color: #123455 !important;
}

    if you’ll use nav-link somewhere else and dont want to edit that class directly, you can create a custom class and apply that.

    Login or Signup to reply.
  3. 0

    The simple way is to add the style in a style tag:

    <style>
    .nav-link {
        color: purple;
    }
</style>

    Instead, if you have custom css file you can add to it:

    .nav-link {
    color: purple;
}

    Please make sure that this style rule comes after other style tags and css files in your html document, otherwise it might be overwritten by another style rule.

    Also, try to avoid using !important as much as possible. As it can cause complications in your css as you add other style rules.

    Please also note that you have two opening <body> tags while html files should have only one opening <body> tag and one closing </body> tag.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search