Why is the arrow not showing?

Question

I am trying to use the bootstrap thing but can't seem to be able to create a simple dropdown button.

Here is the code:

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Choose phobia</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      {% for phobia in phobia_list %}
      <a class="dropdown-item" href="{% url 'android:phobia_detail' phobia.id %}">{{phobia.name}}</a> {% endfor %}
    </div>
  </div>

and how I load bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

and here is the result

May be this can help https://stackoverflow.com/questions/46777704/add-up-down-arrows-to-bootstrap-accordion/46778779 — Dreamer64, Oct 01 '20 at 12:01

score 1 · Answer 1 · answered Feb 06 '16 at 21:13

1

Change the two buttons to one that looks like this:

<button type="button" class="btn btn-primary dropdown-toggle" 
 data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Choose phobia <span class="caret"></span>
</button>

answered Feb 06 '16 at 21:13

Bubblesphere

449
4
11

Thanks. The arrow is now showing but the dropdown is not formatted correctly. :( – mp3por Feb 07 '16 at 14:17

score 0 · Answer 2 · answered Feb 07 '16 at 14:20

For future reference -> the working solution:

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Choose phobia</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      <span class="sr-only">Toggle Dropdown</span>
      <span class="caret"/>
    </button>
    <ul class="dropdown-menu">
      {% for phobia in phobia_list %}
      <li><a class="dropdown-item" href="{% url 'android:phobia_detail' phobia.id %}">{{phobia.name}}</a></li>
      {% endfor %}
    </ul>
  </div>

Why is the arrow not showing?

2 Answers2