Why is typeahead.js tt-dropdown-menu not showing (bootstrap 3)?

Question

This is my html.

<div class="container">
<div class="row">
    <div class="col-md-12">
        <div class="form-inline">
            <span>Looking for</span>
            <div class="form-group">
                <input type="text" class="form-control typeahead" placeholder="Name or PersonID" autocomplete="off">
            </div>
            <button id="btn-go" class="btn btn-primary">Go</button>
        </div>
    </div>
</div>

And this is my javascript:

var people = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: 'contact/search/?id=%QUERY'
});

people.initialize();

$('.typeahead').typeahead(null, {
    name: 'people',
    displayKey: 'value',
    source: people.ttAdapter(),
    templates: {
        suggestion: Handlebars.compile('<p><strong>{{fullname}}</strong> - {{personid}}</p>')
    }
}).on('typeahead:selected', function(obj, datum) {
    console.log(obj);
    console.log(datum);
});

Everything works fine, the results are returned from the server, and the drop-down menu is populated, but not displayed. This seems to be a CSS issue, but I need some help. Why is this menu hidden? I checked the basics such as "display" or "z-index" for the relevant tags, but it doesn’t help. Any ideas?

BTW I am using bootstrap 3 typeahed css which I found here

EDIT:

Found a problem, see my answer below.

Answer 1

, bootstrap / typeahead . , div.container div, . , , - . , , .