<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.
This question is related to
twitter-bootstrap
colors
hyperlink
navbar
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
}
_x000D_
<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>
_x000D_
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>
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";
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.
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
Source: Stackoverflow.com