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.

jgillich's user avatar

jgillich

68.6k6 gold badges55 silver badges83 bronze badges

asked May 30, 2014 at 8:03

anindis's user avatar

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.

answered May 30, 2014 at 8:13

Mihail Burduja's user avatar

Mihail BurdujaMihail Burduja

3,1462 gold badges21 silver badges28 bronze badges

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>

answered Jun 1, 2015 at 15:43

Roubi's user avatar

RoubiRoubi

1,9491 gold badge24 silver badges36 bronze badges

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>

answered Apr 3, 2019 at 17:18

cetinajero's user avatar

cetinajerocetinajero

1671 gold badge2 silver badges12 bronze badges

2

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.

answered Mar 16, 2016 at 21:46

klewis's user avatar

klewisklewis

7,16415 gold badges56 silver badges99 bronze badges

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

answered May 10, 2020 at 16:14

Matt Falkowski's user avatar

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>

answered Dec 15, 2021 at 3:10

JuanDa237's user avatar

JuanDa237JuanDa237

1961 silver badge11 bronze badges

In my design, I want to change my link and hover color in a specific part.

You are describing 3 things that can be tackled all at once within BS4 with sass. If you have access to the .scss file of your custom project and able to compile it, then I would recommend the following approach…

For this particular case, you can create a custom mixin like so:

@mixin my-variant($bgcolorOff, $borcolorOff, $bgcolorOn, $borcolorOn, $bgcolorAct, $borcolorAct, $txtcolorOff, $txtcolorOn, $txtsize, $txtalign){
    @include button-variant($bgcolorOff, $borcolorOff, $bgcolorOn, $borcolorOn, $bgcolorAct, $borcolorAct);
    color:#333; /*set a fallback color*/
    font-weight:normal; /*customize other things about your like so like*/
    text-transform:none; /*customize other things about your like so like*/
    text-decoration:none; /*customize other things about your like so like*/
    text-align:$txtalign; /*reference parameter values like so*/
}

I am assuming your have hex colors assigned to sass variables already like this:

$m-color-red: #da291c;
$m-color-blue: #004c97;
..etc..

If so, call your mixin from any specific location in your sass file. Sense this is your first time, notice how the following parameter $m-color-white represents the value for $bgcolorOff parameter above. So pay close attention to where you put your colors to help define your custom variant.

  .m-variant {
      @include my-variant($m-color-white, $m-color-grey-light, $m-color-off-white, $m-color-grey-light, $m-color-blue, $m-color-grey-light, $m-color-grey-light, $m-color-grey-light, 1.200em, 'left');
   }

Finally, when you create your buttons, or anchor links, you can add the following to your element structures:

<a class="btn btn-sm m-3 m-variant ">my custom button</a>

4 easy steps. After you do this the first time, every other time is easy. By taking this approach, you take full control of your link and hover colors. Re-use and/or create as many variants as you like.

Hope this helps

In my design, I want to change my link and hover color in a specific part.

You are describing 3 things that can be tackled all at once within BS4 with sass. If you have access to the .scss file of your custom project and able to compile it, then I would recommend the following approach…

For this particular case, you can create a custom mixin like so:

@mixin my-variant($bgcolorOff, $borcolorOff, $bgcolorOn, $borcolorOn, $bgcolorAct, $borcolorAct, $txtcolorOff, $txtcolorOn, $txtsize, $txtalign){
    @include button-variant($bgcolorOff, $borcolorOff, $bgcolorOn, $borcolorOn, $bgcolorAct, $borcolorAct);
    color:#333; /*set a fallback color*/
    font-weight:normal; /*customize other things about your like so like*/
    text-transform:none; /*customize other things about your like so like*/
    text-decoration:none; /*customize other things about your like so like*/
    text-align:$txtalign; /*reference parameter values like so*/
}

I am assuming your have hex colors assigned to sass variables already like this:

$m-color-red: #da291c;
$m-color-blue: #004c97;
..etc..

If so, call your mixin from any specific location in your sass file. Sense this is your first time, notice how the following parameter $m-color-white represents the value for $bgcolorOff parameter above. So pay close attention to where you put your colors to help define your custom variant.

  .m-variant {
      @include my-variant($m-color-white, $m-color-grey-light, $m-color-off-white, $m-color-grey-light, $m-color-blue, $m-color-grey-light, $m-color-grey-light, $m-color-grey-light, 1.200em, 'left');
   }

Finally, when you create your buttons, or anchor links, you can add the following to your element structures:

<a class="btn btn-sm m-3 m-variant ">my custom button</a>

4 easy steps. After you do this the first time, every other time is easy. By taking this approach, you take full control of your link and hover colors. Re-use and/or create as many variants as you like.

Hope this helps

Bootstrap 5 Colors

MDB is supported by an extensive Material Design color system that themes our styles and
components. This enables more comprehensive customization and extension for any project.


Theme

We use a subset of all colors to create a smaller color palette for generating color schemes,
also available as SCSS variables and a Sass map in Bootstrap’s
scss/free/_variables.scss file.

All these colors are available as a Sass map, $theme-colors in
scss/free/_variables.scss file.

Note: Theme colors are also available as CSS classes. You can use them
directly in your project without compiling scss code. Have a look at the examples below.

Background

Easily set the background by using .bg-* color classes

Background gradient

By adding a .bg-gradient class, a linear gradient is added as background
image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.

Do you need a gradient in your custom CSS? Just add background-image: var(--mdb-gradient);.

.bg-primary.bg-gradient

.bg-secondary.bg-gradient

.bg-success.bg-gradient

.bg-danger.bg-gradient

.bg-warning.bg-gradient

.bg-info.bg-gradient

.bg-light.bg-gradient

.bg-dark.bg-gradient

Text

Colorize text with color utilities.

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black

.text-white-50

.text-black-50

Depracation: With the addition of .text-opacity-* utilities and CSS variables for text utilities,
.text-black-50 and .text-white-50 are deprecated as
of Bootstrap v5.1.0. They’ll be removed in v6.0.0.

Links

You can use the .link-* classes to colorize links. Unlike the
.text-* classes, these classes have a :hover and
:focus state.

Some of the button styles use a relatively light foreground color, and should only be used
on a dark background in order to have sufficient contrast.

Components

We also use theme colors as predefined colors for some components, for example, buttons.


Opacity

Text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.

How it works

Consider our default .text-primary utility.

We use an RGB version of our --mdb-primary (with the value of 13, 110, 253) CSS variable and attached a second CSS variable,
--mdb-text-opacity, for the alpha transparency (with a default value 1 thanks to a local CSS variable). That means anytime you use .text-primary now, your computed
color value is rgba(13, 110, 253, 1). The local CSS variable inside each .text-*
class avoids inheritance issues so nested instances of the utilities don’t automatically have a modified alpha transparency.

Example

To change that opacity, override —mdb-text-opacity via custom styles or inline styles.

This is default primary text

This is 50% opacity primary text

Or, choose from any of the .text-opacity utilities:

This is default primary text

This is 75% opacity primary text

This is 50% opacity primary text

This is 25% opacity primary text

Background

To change that opacity, override --mdb-bg-opacity via custom styles or inline styles.

This is default success background

This is 50% opacity success background

Or, choose from any of the .bg-opacity utilities:

This is default success background

This is 75% opacity success background

This is 50% opacity success background

This is 25% opacity success background

This is 10% opacity success background


Full palette

All MDB colors are available as SCSS variables and a Sass map in
scss/free/_variables.scss file. To avoid increased file sizes, we don’t create
text or background color classes for each of these variables. Instead, we choose a subset of
these colors for a theme palette.

Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three
contrast ratios to each of the main colors—one for the swatch’s current colors, one for
against white, and one for against black.

Red 50 #FFEBEE

100 #FFCDD2

200 #EF9A9A

300 #E57373

400 #EF5350

500 #F44336

600 #E53935

700 #D32F2F

800 #C62828

900 #B71C1C

A100 #FF8A80

A200 #FF5252

A400 #FF1744

A700 #D50000

Pink 50 #FCE4EC

100 #F8BBD0

200 #F48FB1

300 #F06292

400 #EC407A

500 #E91E63

600 #D81B60

700 #C2185B

800 #AD1457

900 #880E4F

A100 #FF80AB

A200 #FF4081

A400 #F50057

A700 #C51162

Purple 50 #F3E5F5

100 #E1BEE7

200 #CE93D8

300 #BA68C8

400 #AB47BC

500 #9C27B0

600 #8E24AA

700 #7B1FA2

800 #6A1B9A

900 #4A148C

A100 #EA80FC

A200 #E040FB

A400 #D500F9

A700 #AA00FF

Deep Purple 50 #EDE7F6

100 #D1C4E9

200 #B39DDB

300 #9575CD

400 #7E57C2

500 #673AB7

600 #5E35B1

700 #512DA8

800 #4527A0

900 #311B92

A100 #B388FF

A200 #7C4DFF

A400 #651FFF

A700 #6200EA

Indigo 50 #E8EAF6

100 #C5CAE9

200 #9FA8DA

300 #7986CB

400 #5C6BC0

500 #3F51B5

600 #3949AB

700 #303F9F

800 #283593

900 #1A237E

A100 #8C9EFF

A200 #536DFE

A400 #3D5AFE

A700 #304FFE

Blue 50 #E3F2FD

100 #BBDEFB

200 #90CAF9

300 #64B5F6

400 #42A5F5

500 #2196F3

600 #1E88E5

700 #1976D2

800 #1565C0

900 #0D47A1

A100 #82B1FF

A200 #448AFF

A400 #2979FF

A700 #2962FF

Light Blue 50 #E1F5FE

100 #B3E5FC

200 #81D4FA

300 #4FC3F7

400 #29B6F6

500 #03A9F4

600 #039BE5

700 #0288D1

800 #0277BD

900 #01579B

A100 #80D8FF

A200 #40C4FF

A400 #00B0FF

A700 #0091EA

Cyan 50 #E0F7FA

100 #B2EBF2

200 #80DEEA

300 #4DD0E1

400 #26C6DA

500 #00BCD4

600 #00ACC1

700 #0097A7

800 #00838F

900 #006064

A100 #84FFFF

A200 #18FFFF

A400 #00E5FF

A700 #00B8D4

Teal 50 #E0F2F1

100 #B2DFDB

200 #80CBC4

300 #4DB6AC

400 #26A69A

500 #009688

600 #00897B

700 #00796B

800 #00695C

900 #004D40

A100 #A7FFEB

A200 #64FFDA

A400 #1DE9B6

A700 #00BFA5

Green 50 #E8F5E9

100 #C8E6C9

200 #A5D6A7

300 #81C784

400 #66BB6A

500 #4CAF50

600 #43A047

700 #388E3C

800 #2E7D32

900 #1B5E20

A100 #B9F6CA

A200 #69F0AE

A400 #00E676

A700 #00C853

Light Green 50 #F1F8E9

100 #DCEDC8

200 #C5E1A5

300 #AED581

400 #9CCC65

500 #8BC34A

600 #7CB342

700 #689F38

800 #558B2F

900 #33691E

A100 #CCFF90

A200 #B2FF59

A400 #76FF03

A700 #64DD17

Lime 50 #F9FBE7

100 #F0F4C3

200 #E6EE9C

300 #DCE775

400 #D4E157

500 #CDDC39

600 #C0CA33

700 #AFB42B

800 #9E9D24

900 #827717

A100 #F4FF81

A200 #EEFF41

A400 #C6FF00

A700 #AEEA00

Yellow 50 #FFFDE7

100 #FFF9C4

200 #FFF59D

300 #FFF176

400 #FFEE58

500 #FFEB3B

600 #FDD835

700 #FBC02D

800 #F9A825

900 #F57F17

A100 #FFFF8D

A200 #FFFF00

A400 #FFEA00

A700 #FFD600

Amber 50 #FFF8E1

100 #FFECB3

200 #FFE082

300 #FFD54F

400 #FFCA28

500 #FFC107

600 #FFB300

700 #FFA000

800 #FF8F00

900 #FF6F00

A100 #FFE57F

A200 #FFD740

A400 #FFC400

A700 #FFAB00

Orange 50 #FFF3E0

100 #FFE0B2

200 #FFCC80

300 #FFB74D

400 #FFA726

500 #FF9800

600 #FB8C00

700 #F57C00

800 #EF6C00

900 #E65100

A100 #FFD180

A200 #FFAB40

A400 #FF9100

A700 #FF6D00

Deep Orange 50 #FBE9E7

100 #FFCCBC

200 #FFAB91

300 #FF8A65

400 #FF7043

500 #FF5722

600 #F4511E

700 #E64A19

800 #D84315

900 #BF360C

A100 #FF9E80

A200 #FF6E40

A400 #FF3D00

A700 #DD2C00

Brown 50 #EFEBE9

100 #D7CCC8

200 #BCAAA4

300 #A1887F

400 #8D6E63

500 #795548

600 #6D4C41

700 #5D4037

800 #4E342E

900 #3E2723

Gray 50 #FBFBFB

100 #F5F5F5

200 #EEEEEE

300 #E0E0E0

400 #BDBDBD

500 #9E9E9E

600 #757575

700 #616161

800 #4F4F4F

900 #262626

Blue Gray 50 #ECEFF1

100 #CFD8DC

200 #B0BEC5

300 #90A4AE

400 #78909C

500 #607D8B

600 #546E7A

700 #455A64

800 #37474F

900 #263238

Black #000000

White #FFFFFF


Generating utilities

Bootstrap doesn’t include color and background-color utilities for every color variable,
but you can generate these yourself with our utility API and our extended Sass maps added in v5.1.0.

  • To start, make sure you’ve imported our functions, variables, mixins, and utilities.
  • Use our map-merge-multiple() function to quickly merge multiple Sass maps together in a new map.
  • Merge this new combined map to extend any utility with a {color}-{level} class name.

Here’s an example that generates text color utilities (e.g., .text-purple-500) using the above steps.

This will generate new .text-{color}-{level} utilities for every color and level. You can do the same for any other utility and property as well.


Improve Article

Save Article

  • Read
  • Discuss
  • Improve Article

    Save Article

    There are two ways that you can change the font color of the active nav-item. The default font-color is white of the active nav-link in the case of Bootstrap nav-active item. The first-way approach is to use a CSS styling file and changing the nav-item class when clicked.

    The second-way approach is to change the color using jQuery .css() property and also changing the class status to active for a nav-item using jQuery.

    Approach 1: Providing an Overriding CSS Styling: To change the color of the font an overriding styling file can be added to the HTML file. This style file will be used to change the font-color of the selected nav-item. When a nav-item is selected, this style file will be added to that particular nav-item.

    Example:

    html

    <!DOCTYPE html>

    <html lang="en">

        <head>

            <meta charset="utf-8" />

            <meta name="viewport"

                  content="width=device-width,

                           initial-scale=1,

                           shrink-to-fit=no" />

            <link rel="stylesheet"

                  href=

                  integrity=

    "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"

                  crossorigin="anonymous" />

            <script src=

          </script>

            <script src=

          </script>

            <title>Active Link using css style</title>

            <style>

                /*Code to change color of active link*/

                .navbar-nav > .active > a {

                    color: red;

                }

            </style>

        </head>

        <body>

            <ul class="navbar-nav">

                <li class="nav-item active">

                    <a class="nav-link" href="#">

                        Home

                    </a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="#">

                        GeeksForGeeks

                    </a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="#">

                        Others

                    </a>

                </li>

                <li class="nav-item">

                    <a class="nav-link disabled"

                       href="#">Disabled</a>

                </li>

            </ul>

          <script>

              $(document).ready(function () {

                  $("ul.navbar-nav > li").click(function (e) {

                   $("ul.navbar-nav > li").removeClass("active");

                   $(this).addClass("active");

                    });

                });

            </script>

        </body>

    </html>

    Output:

    Here you can observer the color of the active link is changed to red.

    Home link is clicked and its font-color changed  to red

    GeeksForGeeks nav item is clicked

    Approach 2: To change font-color of active-nav using jQuery: To change the font-color of the active-nav link using jQuery, we need to add the active class to that particular nav-item and then we just need to apply the .css(property,value) to change the font- color of the active nav-item. 

    Example:

    html

    <!DOCTYPE html>

    <html lang="en">

        <head>

            <meta charset="utf-8" />

            <meta name="viewport"

                  content="width=device-width,

                           initial-scale=1,

                           shrink-to-fit=no" />

            <link rel="stylesheet"

                  href=

                  integrity=

    "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"

                  crossorigin="anonymous" />

            <script src=

          </script>

            <script src=

          </script>

            <title>Active Link font color using jquery</title>

        </head>

        <body>

            <ul class="navbar-nav">

                <li class="nav-item active">

                    <a class="nav-link" href="#">

                        Home

                    </a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="#">

                        GeeksForGeeks

                    </a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="#">

                        Others

                    </a>

                </li>

                <li class="nav-item">

                    <a class="nav-link disabled"

                       href="#">Disabled</a>

                </li>

            </ul>

            <script type="text/javascript">

                $(document).ready(function () {

                    $("ul.navbar-nav > li > a").click(

                      function (e) {

                        $("ul.navbar-nav > li").removeClass(

                          "active");

                        $("ul.navbar-nav > li > a").css(

                          "color", "");

                        $(this).addClass("active");

                        $(this).css("color", "red");

                    });

                });

            </script>

        </body>

    </html>

    Output:

    The active link color changed to red.

    Home link is clicked and its font-color changed  to red. Here color is changed using jquery.

    GeeksForGeeks nav item is clicked

    Note: The Output of both method will be same. When a particular nav-item is clicked it will change the font-color.
     

    Понравилась статья? Поделить с друзьями:
  • Bootstrap failed 5 input output error
  • Bootstrap error text
  • Bootstrap error popover
  • Bootstrap error page
  • Bootstrap error message input