How to change link color Bootstrap

Question

lt div class  collapse navbar-collapse  gt                       lt ul class  nav pull-right  gt                           lt li class  active  gt  lt a href     gt       lt  a gt  lt  li gt                           lt li gt  lt a href     gt                  lt  a gt  lt  li gt                           lt li gt  lt a href     gt      lt  a gt  lt  li gt                           lt li gt  lt a href     gt          lt  a gt  lt  li gt                       lt  ul gt    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

User · Answer

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   x000D   x000D   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   lt link href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  rel  stylesheet    gt   lt div class  navbar-collapse  gt     lt ul class  nav pull-right  gt        lt  -- Bootstrap s color utility class -- gt       lt li class  active  gt  lt a class  text-success  href     gt       lt  a gt  lt  li gt        lt  -- Bootstrap s color utility class -- gt       lt li gt  lt a class  text-danger  href     gt                  lt  a gt  lt  li gt        lt  -- Bootstrap s color utility class -- gt       lt li gt  lt a class  text-warning  href     gt      lt  a gt  lt  li gt        lt  -- Custom color utility class -- gt       lt li gt  lt a class  text-my-own-color  href     gt          lt  a gt  lt  li gt      lt  ul gt   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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      lt div class  panel panel-default my-panel-styles  gt              lt h4 class  panel-title  gt       lt a class  accordion-toggle btn-block text-warning  data-toggle  collapse  data-parent   accordion  href   collapseOne  gt        My Panel title that is also a link      lt  a gt     lt  h4 gt         lt  div gt    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

User · Answer

For a direct change  you can use Bootstrap classes in the  lt a gt  tag  it won t work in the  lt div gt      lt h4 class  text-center  gt  lt a class  text-warning  href     gt Your text lt  a gt  lt  h4 gt

User · Answer

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

User · Answer

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

[twitter-bootstrap] How to change link color (Bootstrap)

Examples related to twitter-bootstrap

Examples related to colors

Examples related to hyperlink

Examples related to navbar