skip to Main Content

Based on the code below, how can I change the text color to white? The code is adapted from this question. In the tagged question answer, I don’t know how the color was set to blue in the fist place.

.footer-background {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #1c2a48;
}

.logo,
.nav {
  margin-bottom: 10px;
}

.nav-pills {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha512-6MXa8B6uaO18Hid6blRMetEIoPqHf7Ux1tnyIQdpt9qI5OACx7C+O3IVTr98vwGnlcg0LOLa02i9Y1HpVhlfiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="footer-background container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">
        <li><a href="https://www.b.org/opengovernment/prr/Pages/default.aspx">Public Records Request</a></li>

        <li><a href="https://www.b.org/AgenciesAndServices/Pages/Default.aspx">Contact Us</a></li>

        <li><a href="https://www.b.org/ReportAComplaint/Pages/Default.aspx">Report a Complaint</a></li>

        <li><a href="https://www.b.org/Terms/Pages/Default.aspx">Terms of Use</a></li>

        <li><a href="https://www.b.org/Terms/Pages/Default.aspxx">Accessiblity Statement</a></li>

        <li><a href="https://lp.constantcontactpages.com/su/ErJFVZz/B">Subscribe</a></li>
      </ul>
    </div>

    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">
        <li><a href="https://b.granicus.com/ViewPublisher.php?view_id=15">Watch Meetings</a></li>
        <li><a href="https://www.b.org/Pages/Welcome.aspx">Copyrights 2022, Government</a></li>
      </ul>
    </div>

    <div class="col-xs-12 col-sm-4">
      <div class="text-white" style="padding-top: 3rem; text-align: center;">
        <ul class="nav nav-pills">

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

3

Answers


  1. add class css :

    a{
      color: white;
    }
    
    Login or Signup to reply.
  2. This would be an easy fix. You can apply the color to apply white color on the text. If you want to apply the color to the tag, use the CSS selectors :link for unvisited links and :visited for the visited link.

    Login or Signup to reply.
  3. text color is blue because its a link wrapped in <a> tag. to change the color of link text just add following style to anchor tag.

    a{
      color:#ffffff;
    }
    

    and you can change the color of text as if the link is visited on not.

    a:visited{
      color:red /* your fav color */
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search