CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
NoChance
NoChance

Reputation: 5752

Change the color of text in bootstrap4 card class

I want to change the font/text a color different from the default Blue. I tried this code with different settings but the color stays Blue. class .text-white did not work, font color did not work also. Background-color works but not on the text Pls help. Thanks.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div id="faq" role="tablist" aria-multiselectable="true">
        <div class="card">
          <div class="card-header text-white" rode="tab" id="XX1" style="background-color:PINK; color: white; font color: yellow !important">
            <h4 ass="card-title  text-white">
              <a data-toggle="collapse" data-parent="#faq" aria-expanded="true" href="#A11" aria-controls="XX2">
                                   change my text color
                   </a>
            </h4>
          </div>
          <div id="A11" class="collapse show" role="tabcard" aria-labelledby="questionOne">
            <div class="card-body">
              answer 11
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

Upvotes: 2

Views: 12058

Answers (2)

ABD
ABD

Reputation: 1

<a data-toggle="collapse"
    style="color:white" 
    data-parent="#faq" 
    aria-expanded="true" 
    href="#A11" aria-controls="XX2">q11</a>

add your color in place of style="color:your color" .....I hope it will solve your problem... visit http://www.gladsme.com/forum.php? for more information

Upvotes: 0

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

You are going to want to increase specificity when overriding bootstrap css. Example:

.card-header a {
  color: yellow;
}


Demo:

.card-header a {
  color: yellow;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div id="faq" role="tablist" aria-multiselectable="true">
        <div class="card">
          <div class="card-header text-white" rode="tab" id="XX1" style="background-color:PINK; color: yellow !important">
            <h4 ass="card-title  text-white">
              <a data-toggle="collapse" data-parent="#faq" aria-expanded="true" href="#A11" aria-controls="XX2">
                                   change my text color
                   </a>
            </h4>
          </div>
          <div id="A11" class="collapse show" role="tabcard" aria-labelledby="questionOne">
            <div class="card-body">
              answer 11
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

Upvotes: 5

Related Questions