Bootstrap dropdown not working in php codeigniter
Question
I have below html code to add dropdown in my webpage using bootstrap.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</div>
<script src="<?php echo base_url('assets/js/bootstrap.js'); ?>" type="text/javascript"></script>
<script src="<?php echo base_url('assets/js/jquery-3.2.1.min.js'); ?>"></script>
<link href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>" rel="stylesheet" type="text/css"/>
<link href="<?php echo base_url('assets/css/bootstrap.css'); ?>" rel="stylesheet" type="text/css"/>
</body>
Running this code, All I am getting is gray color button, no dropdown on clicking button.
I am working with codeigntier framework and have added all js and css files in assets directory in project
Can please someone help with this?
Thanks a lot.
Note: I am able to use bootstrap for other controls on this page. Only dropdown seems to have an issue.
2 answers
solution1
2 ACCPTED 2017-04-19 12:29:29
You need to try with this code instead of your dropdown code.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <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.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example <span class="caret"></span></button> <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> </ul> </body> </html>
solution2
0 2017-04-19 13:29:03
You have create only one error
Place your jquery with proper order, all first you have to place jquery core file because bootstrap js is totally depends on jquery core js.
below is proper order
// Place your stylesheet in header with this order
<link href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>" rel="stylesheet" type="text/css"/>
<link href="YOUR CUSTOM CSS FILE URL" rel="stylesheet" type="text/css"> //place here your custom style url
// Place your script in footer with this order
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="YOUR CUSTOM JAVASCRIPT FILE URL" type="text/javascript"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.