CODEWITHSUNDEEP
csstwitter-bootstrap
Daniel Williams
Daniel Williams

Reputation: 2317

Bootstrap change color on hover using classes

In my snippet, if you hover over the text it turns the text red, however, rather than hardcoding color:red I'd prefer to use Bootstrap's native class text-danger. Is this possible?

.text-primary:hover {
  color: red !important;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="text-primary">Hello World!</div>

Upvotes: 0

Views: 74

Answers (1)

Taki
Taki

Reputation: 17654

bootstrap's color for text-danger is #dc3545 and it's in a variable ( custom property ) --red so you can use that.

these are the available variables

.text-primary:hover {
  color: var(--red) !important;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="text-primary">Hello World!</div>

Upvotes: 1

Related Questions