3

Im using bootstrap 3 and I want to change the text color of the alert info and alert danger,I want that the texts become darker,how should I do that ?

I search in bootstrap and I've found the following but didnt find the text color...

    .alert-info {
      background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
      background-image:         linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
      background-repeat: repeat-x;
      border-color: #9acfea;

} 
2
  • 3
    text colour is set with "color". So color:red;
    – James
    Aug 7, 2014 at 14:33
  • this is more of a CSS question (on changing text color) rather than bootstrap specific
    – Canica
    Nov 22, 2017 at 13:50

2 Answers 2

10

Looking at the Alerts section on Bootstrap's own website and through the unminfied CSS on their Github repository I can't find any of the CSS you've specified. Instead I can only find the following:

.alert-info {
    color: #31708F;
    background-color: #D9EDF7;
    border-color: #BCE8F1;
}

If you want to make the color darker, you can use a tool like http://paletton.com to generate some complimentary darker colours:

Example

3
  • Thanks a lot voted up,which property is related to text ?and how should I override it in my site file?
    – 07_05_GuyT
    Aug 7, 2014 at 14:39
  • Thanks ,I've two last question :) 1.how should I override this in my site css? 2.there is a way using the paletton to take the color #31708F and simpley make it darker (little bit)?
    – 07_05_GuyT
    Aug 7, 2014 at 14:47
  • Simply use .alert-info { color: your_color; } I've already given you the result from plugging #31708F in to Paletton: #1A5E7F is slightly darker and #0D4864 is much darker. Aug 7, 2014 at 14:49
4

You can just use the customizer!

If you want more flexibility, download the source code, modify the variables.less and use LESS to compile it to CSS.

Intresting for you is the @alert-info-bg variable. Check out mixins/alerts.ess and alerts.less to see how the other colors are generated.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.