CODEWITHSUNDEEP
twitter-bootstrapcolorshyperlinknavbar
anindis
anindis

Reputation: 724

How to change link color (Bootstrap)

enter image description here

<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.

Upvotes: 34

Views: 177160

Answers (8)

Erick Lacerda
Erick Lacerda

Reputation: 21

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;">

Upvotes: 2

JuanDa237
JuanDa237

Reputation: 376

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>

Upvotes: 2

Andrey
Andrey

Reputation: 377

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

Upvotes: 2

cetinajero
cetinajero

Reputation: 347

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>

Upvotes: 12

Matt Falkowski
Matt Falkowski

Reputation: 64

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";

Upvotes: 2

klewis
klewis

Reputation: 8379

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.

Upvotes: 3

Roubi
Roubi

Reputation: 2106

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>

Upvotes: 34

Mihail Burduja
Mihail Burduja

Reputation: 3266

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.

Upvotes: 35

Related Questions