CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Gabriel Augusto
Gabriel Augusto

Reputation: 29

Dropdown Button is not working in Bootstrap

I'm trying to insert a dropdown button but it just doesn't work on my page. I have inserted in my page everything that needs to be inserted from the bootstrap for it to work, but it still doesn't work. What's wrong with my code that it doesn't work?

<head>

   <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    
<title>Consult</title>
</head>


<body>

 <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

<div class="container">

<div class="row">
    <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
    <div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10">
    
    Category:
    
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
        
    </div>
    
    </div>
    <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
</div>

</div>
</body>

Upvotes: 0

Views: 91

Answers (3)

Mostafa Ellethy
Mostafa Ellethy

Reputation: 62

Your code is working fine, maybe a connection problem caused javascript file not loading.

Upvotes: 0

user16716458
user16716458

Reputation:

It is running you can see by running below snippet

<head>

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

  <title>Consult</title>
</head>


<body>

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

  <div class="container">

    <div class="row">
      <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
      <div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10">

        Category:

        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
        </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>

        </div>

      </div>
      <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
    </div>

  </div>
</body>

That's same code you used which is running

Upvotes: 1

Zephire
Zephire

Reputation: 394

You're missing the required the bootstrap javascript. Add the below before your closing body tag.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Upvotes: 1

Related Questions