<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class='container'>
<div class='row'>
<form role="form">
<div class="form-group col-md-2 col-sm-3">
<label for="duration">Duration</label>
<input type="email" class="form-control" id="duration" placeholder="Duration">
</div>
<div class="form-group col-md-2 col-sm-3">
<label for="distance">Distance</label>
<input type="email" class="form-control" id="distance" placeholder="Distance">
</div>
<div class="form-group col-md-2 col-sm-3">
<label for="calories">Calories</label>
<input type="email" class="form-control" id="calories" placeholder="Calories">
</div>
</form>
</div>
<div class='row'>
<div class='col-md-6'>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">What activity you did?</h3>
</div>
<div class="panel-body">
<ul class='activityTypes'>
<li>
Running
</li>
<li class='active'>Walking</li>
<li>Swimming</li>
<li>Swimming</li>
<li>Swimming</li>
