Problem with dropdown button on Bootstrap

Asked

Viewed 13 times

-1

Good morning guys, all right?

I’m doing some tests with Bootstrap and I’m having trouble creating a dropdown button, I copied the documentation code to test, but nothing works. Here’s the project I’m testing

https://codepen.io/filipefalco/pen/zYooVoO?editors=1000

Does anyone know what’s going on?

twitter-bootstrap

  • You have to import CSS files from Bootstrap....

1 answer

0


Try it like this:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">     
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
</div>

</body>
</html>

  • Yours worked mano, but using version 5 of the bootstrap the dropdown did not open. Could be some problem with this version? Or I’m missing something?

  • I found the problem here, there was a change between the versions. In version 5, the attribute "data-toggle" becomes "data-Bs-toggle"

  • Ball show, glad it worked out

  • The following is the link to the documentation: https://getbootstrap.com/docs/5.0/components/dropdowns/

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.