title: cannot custom color span asp-validation-for .net core mvc
body: <p>I am using &quot;span asp-validation-for=&quot; to appear the error message when something wrong. But, I want to change the color, in spite I have class=&quot;text-danger&quot; the color stay black. I have bootstrap and it works fine.
  I took a screenshot (chrome page with inspector) <a href="https://i.stack.imgur.com/0RE0H.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0RE0H.jpg" alt="*screenshot here" /></a>. Thanks a lot everybody</p>
  <pre><code>&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font- 
   awesome.min.css&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;~/lib/bootstrap/dist/css/bootstrap.min.css&quot; /&gt;
  &lt;link href=&quot;~/css/login.css&quot; rel=&quot;stylesheet&quot; /&gt;
  &lt;!-- &lt;script src=&quot;login.js&quot; defer&gt;&lt;/script&gt; --&gt;
  &lt;title&gt;Please Login - Mrx Systems&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class=&quot;wrapper&quot;&gt;
      &lt;div class=&quot;form&quot;&gt;
          &lt;img src=&quot;~/img/LogoMRXSystemsLogin.svg&quot; alt=&quot;Logo_Mrx_Systems&quot; /&gt;
          &lt;form asp-action=&quot;Login&quot; id=&quot;form_login&quot; data-ajax=&quot;true&quot;&gt;
              &lt;div class=&quot;input_wrap&quot;&gt;
                  &lt;label for=&quot;input_text&quot;&gt;Username&lt;/label&gt;
                  &lt;div class=&quot;input_field&quot;&gt;
                      &lt;input asp-for=&quot;Username&quot; class=&quot;form-control input&quot; /&gt;
                      &lt;span asp-validation-for=&quot;Username&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;input_wrap&quot;&gt;
                  &lt;label for=&quot;input_password&quot;&gt;Password&lt;/label&gt;
                  &lt;div class=&quot;input_field&quot;&gt;
                      &lt;input asp-for=&quot;Password&quot; class=&quot;form-control input&quot; /&gt;
                      &lt;span asp-validation-for=&quot;Password&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;input_wrap&quot;&gt;
                  &lt;label for=&quot;input_text&quot;&gt;Database&lt;/label&gt;
                  &lt;div class=&quot;input_field&quot;&gt;
                      &lt;input asp-for=&quot;db&quot; class=&quot;form-control input&quot;/&gt;
                      &lt;span asp-validation-for=&quot;db&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;input_wrap&quot;&gt;
                  &lt;span class=&quot;error_msg&quot;&gt;Incorrect username or password. Please try 
                     again&lt;/span&gt;
                  &lt;input type=&quot;submit&quot; id=&quot;login_btn&quot; class=&quot;btn&quot; value=&quot;Login&quot;&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  @{await Html.RenderPartialAsync(&quot;_ValidationScriptsPartial&quot;);}
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>