Rails 4 Bootstrap - dropdown menu

Question

I have a rails 4 app with bootstrap.

I have required bootstrap in my application.js file.

I am trying to produce a series of drop down menus that have a tile question, a caret and an answer which is selected from a drop down menu.

I'm afraid nothing that I've tried to implement this has worked at all.

Please could some one give me steps (and examples) of how to implement this. By way of example, my hope is to have a series of fields that follow this format:

<div class="row">
    <div class="col-md-8">

<div class="btn-group">
    <button class="btn">I am a:</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
   </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
   <li><a tabindex="-1" href="#">Student</a></li>
   <li><a tabindex="-1" href="#">Academic</a></li>
   <li><a tabindex="-1" href="#">SME</a></li>
   <li><a tabindex="-1" href="#">Corporate</a></li>
   <li><a tabindex="-1" href="#">Grantor</a></li>
   <li><a tabindex="-1" href="#">Investor</a></li>
   </ul>
</div>

If you choose Student from the list, then a label next to the question and caret should read student.

I have tried both options on the bootstrap javascript drop down page. Neither has worked. I am not sure why I have tab index in the list items. I copied that from one of the answers on this forum in relation to a similar question.

Please help if you know how. Thanks very much.

Answer 1

add bootstrap to your gemfile

add //= require bootstrap in your application.js

add @import "bootstrap"; in your application.css.scss