<div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Select Event
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

                    <button class = "dropdown-item" href="#"><b>Sprints</b></button>
                    <div role="separator" class="dropdown-divider"></div>

                    {% for event in sprint %}
                        <button class = "dropdown-item" href="#">{{event}}</button>
                    {% endfor %}

                    <div role="separator" class="dropdown-divider"></div>
                    <button class = "dropdown-item" href="#"><b>Distance</b></button>
                    <div role="separator" class="dropdown-divider"></div>

                    {% for event in distance %}
                        <button class = "dropdown-item" href="#">{{event}}</button>
                    {% endfor %}


                    <div role="separator" class="dropdown-divider"></div>
                    <button class = "dropdown-item" href="#"><b>Field</b></button>
                    <div role="separator" class="dropdown-divider"></div>

                    {% for event in field %}
                        <button class = "dropdown-item" href="#">{{event}}</button>
                    {% endfor %}

                    <div role="separator" class="dropdown-divider"></div>
                    <button class = "dropdown-item" href="#"><b>Multi</b></button>
                    <div role="separator" class="dropdown-divider"></div>

                    <button class ="dropdown-item" href = "#">Decathlon (M)</button>
                    <button class ="dropdown-item" href = "#">Heptathlon (W)</button>
                </div>
              </div>