content for bootstrap nav-tab's not showing - html

Question

I have a list of locations that I populate from a database. I then use flask and bootstrap to show a nav-tabs for each iteration in the list.
I dynamically create a nav-tab for each location in the list when I iterate through it. Which then has dynamic data specific to that tab
I have been able to get the locations as the nav-tab names. I do not see the content for each tab.
Q: What am I doing wrong that causes the content for each tab to not show?
__init.py__
engine = create_engine('mysql://user:passwd#ip_add/db')
insp = reflection.Inspector.from_engine(engine)
locations = []
for i in insp.get_table_names():
locations.append(str(i))
#app.route('/dashboard/')
#login_required
def dashboard():
return render_template("dashboard.html", TOPIC_DICT = TOPIC_DICT, locations=locations)
dashboard.html
{% extends "header.html" %}
{% block body %}
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
{% for loc in locations %}
<li role="presentation">{{ loc }}</li>
{% endfor %}
</ul>
<!-- Tab panes -->
<div class="tab-content">
{% for loc in locations %}
<div role="tabpanel" class="tab-pane fade" id="{{ loc }}">stuff for {{ loc }}</div>
{% endfor %}
</div>
</div>
{% endblock %}
browser view screenshot
browser page source
When I look at the page source I can see the content 'stuff for PRETORIA', but doesnt show on the page.
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">GTSP</li>
<li role="presentation">PRETORIA</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade" id="GTSP">stuff for GTSP</div>
<div role="tabpanel" class="tab-pane fade" id="PRETORIA">stuff for PRETORIA</div>
</div>
</div>

Answer 1

The error is that your a hrefs in your nav tabs are linked to incorrect ids: each should be linked to the id of the corresponding tab content.
<li role="presentation">GTSP</li>
<li role="presentation">PRETORIA</li>
So you should have in your jinja2 template the href set up like so:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
{% for loc in locations %}
<li role="presentation">{{ loc }}</li>
{% endfor %}
</ul>
See how is set up the href attribute:
href="#{{ loc }}"