CODEWITHSUNDEEP
bootstrap-4
Chloe
Chloe

Reputation: 13

Dropdown button isn't working with bootstrap 4

'<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head 
content must come *after* these tags -->
   `<title>Christmas Event</title>`

<!-- Bootstrap -->
<link href="bootstrap-4.0.0-beta.2-dist/css/bootstrap.min.css" 
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="christmas.css">




<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media 
queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js">
</script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
<![endif]-->
</head>
 <body>
 <div class="dropdown">
 <button class="btn btn-secondary dropdown-toggle" type="button" 
 id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-
 expanded="false">
 Dropdown button
 </button>
 <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </div>



<div class="section1">
<div class="container">
<div class="row">
<div class="col-sm-7 offset-6">
<h1>Come down to Augustine House on 15th December! Our Christmas event will 
include:</h1>
            <h2>Lapland is coming to Canterbury with our very own reindeer 
</h2>
        <h2>Ice ice baby! Decorate gingerbread with delicious icing and 
treats</h2>
        <h2>Sing along with the Gospel Choir and their festive carols</h2>
    </div>
   </div>


</div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<!-- Include all compiled plugins (below), or include individual files as 
needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html> `

My problem is that no matter what code i try to create a dropdown option (preferably that pops up when the screen is reduced), the button doesn't open the options. Is there something i'm missing? I've tried every possible combination including using icons from font-awesome.. really need help.

Upvotes: 1

Views: 2479

Answers (1)

WebDevBooster
WebDevBooster

Reputation: 14964

One of the things that's required for dropdown (and dropups etc.) in Bootstrap 4 beta 3 is the inclusion of popper.js

Also, the use of outdated jQuery and outdated Bootstrap css is a bad idea.

Try including the following before </body>: 

<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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

I have tried your code with those files (and with the correct version of Bootstrap css) and your code is working fine.

Upvotes: 2

Related Questions