Bootstrap CSS Button Issue, not changing colors - html

Question

I have a bootstrap button that looks like this:
The HTML code fr this button is this:
<button type="button" class="btn-primary.custom-btn" data-bs-toggle="modal" data-bs-target="#exampleModal">
More Info
</button>
For Some reason my CSS is not showing up. I thought it was because I had other buttons on my page and their CSS was conflicting, so I changed the class to separate them:
<button class="btn-filter active" onclick="filterSelection('all')"> Show all</button>
It was just btn and I changed it to btn-filter so I could easily tell the difference in my CSS, but I am still having trouble with the custom btn not changing to the correct color.
Here is m y CSS:
<style>
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
/* Center website */
.main {
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 50px;
word-break: break-all;
}
.row {
margin: 10px -16px;
}
/* Add padding BETWEEN each column */
.row,
.row > .column {
padding: 8px;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
display: none; /* Hide all elements by default */
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: white;
padding: 10px;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn-filter {
border: none;
outline: none;
padding: 12px 16px;
background-color: white;
cursor: pointer;
}
.btn-filter:hover {
background-color: #ddd;
}
.btn-filter.active {
background-color: #666;
color: white;
}
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #E7E7E7;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
body {
padding-top: 75px;
}
.footer {
background-color: transparent;
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: max-content;
display: inline-block !important;
}
.wrapper {
display: block;
}
#sidebar {
min-width: 250px;
max-width: 250px;
height: 100vh;
position: fixed;
top: 0;
left: -250px;
z-index: 99999;
background: #212529;
transition: all 0.3s;
padding: 1em;
}
#sidebar.active {
left: 0;
}
.overlay {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
opacity: 0;
transition: all 0.5s ease-in-out;
top: 0;
}
/* display .overlay when it has the .active class */
.overlay.active {
display: block;
opacity: 1;
}
#dismiss {
width: 35px;
height: 35px;
position: absolute;
/* top right corner of the sidebar */
top: 10px;
right: 10px;
color: #dc880a;
}
#sidebar .sidebar-header {
padding: 20px;
background: #212529;
}
#sidebar ul.components {
padding: 20px 0;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
color: #dc880a;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
.btn-primary.custom-btn {
background-color: #dc880a;
border-color: #dc880a;
}
* {
padding: 0;
margin: 0;
}
</style>
I am not sure what I am missing here...

Answer 1

You need to adjust the css classes on your button. Specifically, class="btn-primary.custom-btn" needs to change to class="btn-primary custom-btn".
The reason is that the CSS selector .btn-primary.custom-btn means "all elements with both btn-primary and custom-btn classes" but the class actually applied to the button is a single class called btn-primary.custom-btn.
<button type="button" class="btn-primary custom-btn" data-bs-toggle="modal" data-bs-target="#exampleModal">
More Info
</button>

Answer 2

The reason why it doesn't pick up your style is because you have incorrect class name. You need to change the button class name from class="btn-primary.custom-btn" to class="btn-primary custom-btn". You don't need the dot when giving HTML element a class name.