<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> <!------ Include the above in your HEAD tag ----------> <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> <li>Swimming</li> </ul> </div> </div> </div> </div> </div>

@import url(http://fonts.googleapis.com/css?family=Lato); body { background-color: #EFEDDF; } .activityTypes { margin: 0; padding: 0; border: 0; overflow: hidden; width: 100%; } .activityTypes li { list-style-image: none; list-style-type: none; margin-left: 0; display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; white-space: nowrap; } .activityTypes li { background-color: #FFF; padding: 8px; margin: 3px; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); width: 127px; margin-right: 8px; line-height: 1.5em; text-align: center; font-family: 'Lato', sans-serif; font-size: 14px; color: #3F4944; } .activityTypes li.active { background-color: #3F4944; color: #FFF; } .panel-success>.panel-heading { color: #636365; background-color: #E4E3D5; border-color: #DDDDDD; }