CODEWITHSUNDEEP
htmlcsstwitter-bootstrapdropdown
steeve61
steeve61

Reputation: 57

My dropdown button does not open

I have a site with Bootstrap 3.3.7

I want to create a dropdown button, but it does not open.

What's wrong with my code ? Thank you

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <div class="fa-4x">
      <span class="fa-layers fa-fw">
        <i class="fas fa-circle"></i>
        <i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
      </span>
    </div>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Upvotes: 1

Views: 96

Answers (6)

zubair khanzada
zubair khanzada

Reputation: 933

Add this links

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/jquery-3.2.0.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

HTML:

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <div class="fa-4x">
      <span class="fa-layers fa-fw">
        <i class="fas fa-circle"></i>
        <i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
      </span>
        </div>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Upvotes: 1

Venkata Sandeep
Venkata Sandeep

Reputation: 191

Your dropdown in the page is working fine. I couldn't find any problem there. You have only one option "create my profile" right ?

Upvotes: 0

KylinWu
KylinWu

Reputation: 151

<div class="view-empty">
<div class="fa-4x dropdown">
    <a class="dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
        <span class="fa-layers fa-fw">
            <svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg><!-- <i class="fas fa-circle"></i> -->
          <svg class="svg-inline--fa fa-plus fa-w-14 fa-inverse" data-fa-transform="shrink-6" aria-hidden="true" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="" style="transform-origin: 0.4375em 0.5em;"><g transform="translate(224 256)"><g transform="translate(0, 0)  scale(0.625, 0.625)  rotate(0 0 0)"><path fill="currentColor" d="M448 294.2v-76.4c0-13.3-10.7-24-24-24H286.2V56c0-13.3-10.7-24-24-24h-76.4c-13.3 0-24 10.7-24 24v137.8H24c-13.3 0-24 10.7-24 24v76.4c0 13.3 10.7 24 24 24h137.8V456c0 13.3 10.7 24 24 24h76.4c13.3 0 24-10.7 24-24V318.2H424c13.3 0 24-10.7 24-24z" transform="translate(-224 -256)"></path></g></g></svg><!-- <i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i> -->
        </span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
</div>

Try this code.

Upvotes: 0

itsundefined
itsundefined

Reputation: 1450

You are missing popper.js. A dependency required for dropdown. You can use bootstrap.bundled.min.js that has this library.

Upvotes: 1

Sunniya Maini
Sunniya Maini

Reputation: 75

Please add jQuery script to your site. 

Add this script:   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Fiddle for reference: https://jsfiddle.net/npbf0pxz/5/

Upvotes: 0

Deepu Reghunath
Deepu Reghunath

Reputation: 9663

The problem will solve if you use these links that used for this

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <div class="fa-4x">
      <span class="fa-layers fa-fw">
        <i class="fas fa-circle"></i>
        <i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
      </span>
        </div>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Upvotes: 0

Related Questions