How to Change Color of Bootstrap Borders?

Admin 1
Viewed 2389

Been trying to figure out how to change the color of my Bootstrap border, without using the generic bootstrap colors (aka

<span class="border border-primary"></span>

so I tried giving my border an id, and styling that id in the .CSS file as border-color: yellow; and color: yellow; to no avail. The code is not working. Although background-color: yellow; works fine just not working the border itself.

Here's my code:

.iconBorder {
  border-color: yellow;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<span class="border border-primary">Button</span>
<span class="border-bottom p-4 m-2 d-inline-block" style="margin-top: em" id="iconBorder">

twitter-bootstrap css html
2 Answers

See the answer regarding !important. Also, your CSS has

.iconBorder {
    border-color: yellow;
}

.iconBorder is a class. your HTML has 'iconBorder' as an ID.

So your CSS should use a hashtag:

#iconBorder {
    border-color: yellow;
}

This might not solve the problem (see !important) but it could help, and FYI.

user_11717020

If you want to override any default properties of bootstrap you have to make those properties as !important.

Example

.container {
  display: flex;
  justify-content: center;
}

.border {
  margin: 10px;
}

.border-primary:nth-child(1) {
  border-color: green !important;
}

.border-primary:nth-child(2) {
  border-color: yellow !important;
}

.border-primary:nth-child(3) {
  border-color: red !important;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
  <span class="border border-primary">Button</span>
  <span class="border border-primary">Button</span>
  <span class="border border-primary">Button</span>
</div>

user_135368930
Related