why does the outline buttons class show me only gray color?-CodePudding

I am trying to use the outline buttons class(btn btn-outline-primary) in bootstrap but for some reason, all the buttons aren't colored at all I only see them as gray here what I am mean this is how buttons should look like: https://ibb.co/ChKf83y but here is how they look for me: https://ibb.co/8X1nHSn here is the code:

    <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" >Random Videos</button>
    <button type="button" >Success</button>
  </body>
</html>

CodePudding user response：

You are using Bootstrap 3 and outline buttons were introduced in Bootstrap 4. You can either upgrade to Bootstrap 4 or use CSS instead.