How to change link color (Bootstrap)

Question

<div class="collapse navbar-collapse">
                    <ul class="nav pull-right">
                        <li class="active"><a href="#">О нас</a></li>
                        <li><a href="#">Как это работает</a></li>
                        <li><a href="#">Цены</a></li>
                        <li><a href="#">Контакты</a></li>
                    </ul>

I'm very new to Bootstrap. Here I have 3 classes pointed. And I have at least 3 .css files: styles.css, flat-ui.css, bootstrap.css. I don't know how to change these link-colors.

Sanitarium

See this answer for learning more: #16558137 – Addington

Answer 1

ul.nav li a, ul.nav li a:visited {
    color: #anycolor !important;
}

ul.nav li a:hover, ul.nav li a:active {
    color: #anycolor !important;
}

ul.nav li.active a {
    color: #anycolor !important;
}

Change the styles as you wish.

Jocosity

Answer 2

For a direct change, you can use Bootstrap classes in the <a> tag (it won't work in the <div>):

<h4 class="text-center"><a class="text-warning" href="#">Your text</a></h4>

Concurrent

As of Bootstrap 3.3.6, adding text-warning, or any text styling to an anchor link that is within a panel-title region, does not work. – Ideogram

Reacts on hover and changes colour – Violoncellist

What do panels have to do with this question? FYI, Panels have been replaced with cards in Bootstrap 4. This technique works fine with them. – Sherburn

Answer 3

If you are using Bootstrap 4, you can simple use a color utility class (e.g. text-success, text-danger, etc... ).

You can also create your own classes (e.g. text-my-own-color)

Both options are shown in the example below, run the code snippet to see a live demo.

.text-my-own-color {
  color: #663300 !important; // Define your own color in your CSS
}
.text-my-own-color:hover, .text-my-own-color:active {
  color: #664D33 !important; // Define your own color's darkening/lightening in your CSS
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar-collapse">
  <ul class="nav pull-right">

    <!-- Bootstrap's color utility class -->
    <li class="active"><a class="text-success" href="#">О нас</a></li>

    <!-- Bootstrap's color utility class -->
    <li><a class="text-danger" href="#">Как это работает</a></li>

    <!-- Bootstrap's color utility class -->
    <li><a class="text-warning" href="#">Цены</a></li>

    <!-- Custom color utility class -->
    <li><a class="text-my-own-color" href="#">Контакты</a></li>

  </ul>
</div>

Doubleminded

Warning: this custom color example does not handle darkening/lightening on hover/active/focus like native Bootstrap colors (primary, danger...) do. – Hypanthium

Hi @Theophany, the answer was expanded to include how to handle the darkening/lightening thru hover/active CSS selectors, the focus was omitted because commonly is only used for input elements but you can modify the code as you need. – Doubleminded

Answer 4

I'm fully aware that the code in the original quesiton displays a situation of being navbar related. But as you also dive into other compontents, it maybe helpful to know that the class options for text styling may not work.

But you can still create your own helper classes to keep the "Bootstrap flow" going in your HTML. Here is one idea to help style links that are in panel-title regions.

The following code by itself will not style a warning color on your anchor link...

<div class="panel panel-default my-panel-styles"> 
...    
  <h4 class="panel-title">
    <a class="accordion-toggle btn-block text-warning" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      My Panel title that is also a link
    </a>
  </h4>
 ...
 </div>

But you could extend the Bootstrap styling package by adding your own class with appropriate colors like this...

.my-panel-styles .text-muted {color:#777;}
.my-panel-styles .text-primary {color:#337ab7;}
.my-panel-styles .text-success {color:#d44950;}
.my-panel-styles .text-info {color:#31708f;}
.my-panel-styles .text-warning {color:#8a6d3b;}
.my-panel-styles .text-danger {color:#a94442;}

...Now you can continue building out your panel anchor links with the Bootstrap colors you want.

Ideogram

Answer 5

using bootstrap 4 and SCSS check out this link here for full details

https://getbootstrap.com/docs/4.0/getting-started/theming/

in a nutshell...

open up lib/bootstrap/scss/_navbar.scss and find the statements that create these variables

  .navbar-nav {
    .nav-link {
      color: $navbar-light-color;

      @include hover-focus() {
        color: $navbar-light-hover-color;
      }

      &.disabled {
        color: $navbar-light-disabled-color;
      }
    }

so now you need to override

$navbar-light-color
$navbar-light-hover-color
$navbar-light-disabled-color

create a new scss file _localVariables.scss and add the following (with your colors)

$navbar-light-color : #520b71
$navbar-light-hover-color: #F3EFE6;
$navbar-light-disabled-color: #F3EFE6;

@import "../lib/bootstrap/scss/functions";
@import "../lib/bootstrap/scss/variables";
@import "../lib/bootstrap/scss/mixins/_breakpoints";

and on your other scss pages just add

@import "_localVariables";

instead of

@import "../lib/bootstrap/scss/functions";
@import "../lib/bootstrap/scss/variables";
@import "../lib/bootstrap/scss/mixins/_breakpoints";

Fulgurate

Answer 6

You can use .text-reset class to reset the color from default blue to anything you want. Hopefully this is helpful.

Source: https://getbootstrap.com/docs/4.5/utilities/text/#reset-color

Rossierossing

Answer 7

Now in Bootstrap 5 you have colored links. See here.

<a href="#" class="link-primary">Primary link</a>
<a href="#" class="link-secondary">Secondary link</a>
<a href="#" class="link-success">Success link</a>
<a href="#" class="link-danger">Danger link</a>
<a href="#" class="link-warning">Warning link</a>
<a href="#" class="link-info">Info link</a>
<a href="#" class="link-light">Light link</a>
<a href="#" class="link-dark">Dark link</a>

Hayrack

Answer 8

In Bootstrap 5, it is possible to change the link color like this:

<a class="icon-link" style="--bs-link-color-rgb: 25, 135, 84;">

Preestablish