bootstrap dropdown doesn't show dropdowns on click

Question

I've been learning bootstrap and I have a very basic page I'm working on to learn hands on with. I tried adding in a dropdown and it doesn't dropdown at all when it is clicked, I checked to forum and the main thing was people not having the bootstrap js link, so I made sure I included that, and I'm pretty sure that I have all the proper links for it to work. (code is being weird in snippet, works normally on everything else) Thanks for the help, my code is:

 .div1 {
      background-color:#80bfff;
    }

    .div2 {
      background-color:#ccffff;
    }

    .div3 {
      background-color:#80bfff;
    }

    .row {
      height: calc(100vh - 300px);
    }

    #main {
      background-color: #3333ff;
    }

    #main_head {
      height: 150px;
      margin: 0;
    }

    #main_foot {
      height: 150px;
      background-color:#3333ff;
      margin: 0;
     position: absolute;
     left: 0;
     right: 0;
    
  }
  
  h1 {
    color: black;
  }

<!DOCTYPE html>
    <html>
      <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
    
    </head>
    <body>
      
    <link rel="stylesheet" href="test.css">
    <script src="test.js"></script>
    <div class="container-fluid" id="main">
      <h1 id="main_head">This is a heading</h1>
      
      <div class="row">
        
        <div class="col-sm-2 div1">
          <div class="btn-group-vertical">
            <h4>These buttons don't work yet because I haven't implemented anything yet</h4>
            <button type="button" class="btn btn-warning">Button 1</button>
            <button type="button" class="btn btn-info">Button 2</button>
            <button type="button" class="btn btn-success">Button 3</button>
          </div>
        </div>
        
        <div class="col-sm-8 div2">
        </div>
        
        <div class="col-sm-2 div3">
          <div class="container">
            <h4>This is a dropdown menu</h4>
            <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu
            <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Dropdown 1</a></li>
                <li><a href="#">Dropdown 2</a></li>
                <li><a href="#">Dropdown 3t</a></li>
              </ul>
            </div>
          </div>
        </div>
        
      </div>
      
      <div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
    </div>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </body>
    </html>

M0ns1f · Accepted Answer · 2017-11-12 17:02:11Z

1

First you'r calling two bootstrap version one in the head and one on the footer , second you need to call popper.js before bootstrap.js

see snippet

.div1 {
      background-color:#80bfff;
    }

    .div2 {
      background-color:#ccffff;
    }

    .div3 {
      background-color:#80bfff;
    }

    .row {
      height: calc(100vh - 300px);
    }

    #main {
      background-color: #3333ff;
    }

    #main_head {
      height: 150px;
      margin: 0;
    }

    #main_foot {
      height: 150px;
      background-color:#3333ff;
      margin: 0;
     position: absolute;
     left: 0;
     right: 0;
    
  }
  
  h1 {
    color: black;
  }

<!DOCTYPE html>
    <html>
      <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

    
    </head>
    <body>
      
    <link rel="stylesheet" href="test.css">
    <script src="test.js"></script>
    <div class="container-fluid" id="main">
      <h1 id="main_head">This is a heading</h1>
      
      <div class="row">
        
        <div class="col-sm-2 div1">
          <div class="btn-group-vertical">
            <h4>These buttons don't work yet because I haven't implemented anything yet</h4>
            <button type="button" class="btn btn-warning">Button 1</button>
            <button type="button" class="btn btn-info">Button 2</button>
            <button type="button" class="btn btn-success">Button 3</button>
          </div>
        </div>
        
        <div class="col-sm-8 div2">
        </div>
        
        <div class="col-sm-2 div3">
          <div class="container">
            <h4>This is a dropdown menu</h4>
            <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu
            <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Dropdown 1</a></li>
                <li><a href="#">Dropdown 2</a></li>
                <li><a href="#">Dropdown 3t</a></li>
              </ul>
            </div>
          </div>
        </div>
        
      </div>
      
      <div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
    </div>
    </body>
    </html>

edited Nov 12, 2017 at 17:02

answered Nov 12, 2017 at 16:56

M0ns1f

2,7113 gold badges18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joel Banks Over a year ago

This worked perfectly, thanks. Do you know the reason that it has to be in that order? Seems like it should work both ways, Thanks again

M0ns1f Over a year ago

because bootstrap4.js need Popper.js to work see this one of the most issue asked in github

Joel Banks Over a year ago

Interesting, Thanks

Obed · Accepted Answer · 2017-11-12 16:56:34Z

0

I think you sould try using another CDN files, this worked for me

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

answered Nov 12, 2017 at 16:56

Obed

314 bronze badges

Collectives™ on Stack Overflow

bootstrap dropdown doesn't show dropdowns on click

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related