<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel with-nav-tabs panel-primary">
<div class="panel-heading">
<ul class="nav nav-tabs nav nav-tabs nav-justified">
<li class="active"><a href="#service-one" data-toggle="tab">Ethics</a></li>
<li><a href="#service-two" data-toggle="tab">Executive Session</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#"> Special Topics Tuesday Options <span class="caret"></span></a>
<ul class="dropdown-menu nav nav-list">
<li><a href="#service-three" data-toggle="tab">Special Topics Tuesday OPTION 1</a></li>
<li><a href="#service-four" data-toggle="tab">Special Topics Tuesday OPTION 2</a></li>
</ul>
<li><a href="#service-five" data-toggle="tab">Special Topics Wednesday</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="service-one">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<dl>
<dt class="text-danger">The Annual Ethics Session </dt>
<dt>Lunch not included</dt>
</dl>
<button class="btn btn-danger" data-toggle="modal" data-target="#TCethics">
Ethics Topics
</button>
<div class="modal fade" id="TCethics" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
