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.

You can try <?php echo site_url().'assets/js/bootstrap.js'; ?> in script — Sunny Khatri
– Sunny Khatri, Commented Apr 19, 2017 at 12:13
@SunnyKhatri Same way I am able to use bootstrap for other controls. Only dropdown seems to have an issue — Dheeraj Kumar
– Dheeraj Kumar, Commented Apr 19, 2017 at 12:14

Mandip Vora · Accepted Answer · 2017-04-19 12:34:41Z

2

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>

edited Apr 19, 2017 at 12:34

answered Apr 19, 2017 at 12:29

Mandip Vora

3091 gold badge2 silver badges14 bronze badges

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

1 Comment

Dheeraj Kumar Over a year ago

It worked. So code which I was using is incorrect? I got it from bootstrap website.

ImBhavin95 · Accepted Answer · 2017-04-19 13:29:03Z

1

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>

answered Apr 19, 2017 at 13:29

ImBhavin95

1,5232 gold badges18 silver badges29 bronze badges

1 Comment

Rahul Kumar Over a year ago

Thanks Man! I spent hours and hours to finally figure it out that linking 2 version of same bootstrap.min.js was responsible for the malfunctioning.

Collectives™ on Stack Overflow

Bootstrap dropdown not working in php codeigniter

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related