CODEWITHSUNDEEP
cssbootstrap-4
doctorprofessor
doctorprofessor

Reputation: 435

Can't override bootstrap to implement my own CSS

.lo:link, .lo:visited {
    color: #0060b6;
    text-decoration: none;
    background-color: transparent;
}

<div class="row">
      {% for project in projects %}
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
          <img src="{{ project.image.url }}" height="250" width="348">
          <div class="card-body">
            <h4><a class="lo" href="{{ project.url }}">{{ project.title }}</a></h4>
            <p class="card-text">{{ project.description }}</p>
            <div class="d-flex justify-content-between align-items-center">
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

I'm trying to change the stuff in the <a> tag so it's not blue and highlighted.

CSS links are in the right order - bootstrap first, then my own.

I've also tried adding !important after each CSS property doesn't work.

I'm using the Django block content method to have header and footer but that shouldn't make any difference.

Upvotes: 0

Views: 102

Answers (4)

doctorprofessor
doctorprofessor

Reputation: 435

SOLVED! thanks, I really did try everything for 4 agonizing days, it turns out it was in settings.py (using django) STATIC_URL was set to a specific directory so I just had to put my custom css in there, reference that in html and it worked

Upvotes: 0

ElsaKarami
ElsaKarami

Reputation: 646

You should use id instead of class, because id has a higher priority than class:

#lo:link, #lo:visited {
  color: #0060b6;
  text-decoration: none;
  background-color: transparent;
}

Upvotes: 1

Ahmad Dalao
Ahmad Dalao

Reputation: 2056

In bootstrap, <a> tag has its own rules which can be overridden easily.

a {
    color: #007bff; /* change to the color you want */ 
    text-decoration: none;
    background-color: transparent;
}

a:hover {
    color: #0056b3; /* change me as you like */
    text-decoration: underline;
}

Also, I gave it a try using your style.And it did work for me in a new project which means, you need to check what's preventing it from changing? maybe it's about the CSS specificity

Upvotes: 0

Dan Mullin
Dan Mullin

Reputation: 4435

Override the property this way:

.lo:link, .lo:visited {
    color: #0060b6;
    text-decoration: none;
    background-color: transparent;
}

Upvotes: 0

Related Questions