<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#display-setup"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="display-setup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Display Setup</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-sm-3"> <ul class="nav nav-pills nav-stacked"> <li role="presentation" class="active"><a href="#cursor" data-toggle="tab">Cursor</a></li> <li role="presentation"><a href="#redline" data-toggle="tab">Red Line</a></li> <li role="presentation"><a href="#viewing" data-toggle="tab">Viewing</a></li> </ul> </div> <div class="col-sm-9"> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="cursor"> <div class="row">Cursor</div> </div> <div role="tabpanel" class="tab-pane" id="redline"> <div class="row">Red Line</div> </div> <div role="tabpanel" class="tab-pane" id="viewing"> <div class="row">Viewing</div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-default">Defaults</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>