I'm having trouble with the outline buttons class (btn btn-outline-primary) in Bootstrap. For some reason, all the buttons appear gray instead of colored as they should. Here's an example of how the buttons should look: https://ibb.co/ChKf83y, but this is how they actually look for me: https://ibb.co/8X1nHSn. Below is the code I'm using:
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>toggle</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<style>
#p {
position: absolute;
top: 50%;
left: 50%;
}
</style>
<body>
<button id="p" class="btn btn-outline-warning ">Random Videos</button>
<button type="button" class="btn btn-outline-primary">Success</button>
</body>
</html>