JSFiddle - React, Tailwind, and code Playground

by studiosoldru

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-md-5">
    </div>
    <div class="col-md-2 school-options-dropdown">
            <div class="dropdown">
              <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a School
              <span class="caret"></span></button>
              <ul class="dropdown-menu">
                  <li><a href="#">Add your school</a></li>
                  <li><a href="#">Hello</a></li>
              </ul>
            </div>
    </div>
    <div class="col-md-5">
</div>

CSS

.dropdown{text-align:center;}
.button, .dropdown-menu{margin:10px auto}
.dropdown-menu{width:200px; left:50%; margin-left:-100px;}