CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
fevid
fevid

Reputation: 743

Can't get dropdown Menu working with bootstrap

I used exactly as tutorials from getbootstrap and did exactly how it said but it's not working, I click on it and nothing appears. I added Head of HTML file cause you guys told me My jquery and bootstrap CND may have problem so here it is:

<!DOCTYPE HTML>

<html>
    
    <head>
        <title> 
            hah?
        </title>
        <link href="CSS/style.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    </head>
    
    <body>
        
        
        
        <div class="container-fluid" id="container2">
            <a href="" id="g2glogo"></a>
            <div class="dropdown">
              <button class="btn-category dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
                CATEGORIES
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">CURRENCY</a>
                <a class="dropdown-item" href="#">TOP UP</a>
                <a class="dropdown-item" href="#">ITEMS</a>
              </div>
            </div>
            
           
        </div>
        
        
        
        
        
    </body>
    
</html>

Upvotes: 3

Views: 279

Answers (2)

SeppeDev
SeppeDev

Reputation: 2302

You have to include the javascript files at the end of your body tag. So don't import them in your head. Try copying and pasting below snippet. Hope this helps.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>StackOverflow</title>
  </head>
  <body>
    <div class="container-fluid" id="container2">
      <a href="" id="g2glogo"></a>
      <div class="dropdown">
        <button class="btn-category dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
          CATEGORIES
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">CURRENCY</a>
          <a class="dropdown-item" href="#">TOP UP</a>
          <a class="dropdown-item" href="#">ITEMS</a>
        </div>
      </div>


    </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Upvotes: 0

Victoria Ruiz
Victoria Ruiz

Reputation: 5013

You need to include jQuery, popper and the bootstrap JS and CSS for this to work. Here's a working snippet. 

.btn-category{
    background-color: #F7F7FA;
    border-radius: 4px;
    padding: 7px 15px;
    margin: 35px 0 0 0;
    border: 1px solid red;
    color: red;
    font-size: 12px;

}
.btn-category:focus {
  outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="dropdown">
              <button class="btn-category dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                CATEGORIES
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">CURRENCY</a>
                <a class="dropdown-item" href="#">TOP UP</a>
                <a class="dropdown-item" href="#">ITEMS</a>
              </div>
            </div>

You can find the libraries you're missing here: http://getbootstrap.com/docs/4.1/getting-started/introduction/

Upvotes: 1

Related Questions