<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 ----------> <div class="container"> <div class="card hovercard"> <img src="http://www.scottishlandandestates.co.uk/blog/wp-content/uploads/2014/11/img_8143-8.jpg" alt=""/> <div class="avatar"> <img src="https://image.ibb.co/haQdKa/small_initial.png" /> </div> <div class="info"> <div class="title"> Book Now </div> <div class="mid"> <input name="rivers" id="rivers" placeholder="Where" ng-model="selected" typeahead="river for river in states | filter:$viewValue | limitTo:8" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" aria-autocomplete="list" aria-expanded="false" aria-owns="typhead-3-3802" type="text"> <i class="fa fa-map-marker icon" aria-hidden="true"></i> <input type="text" class="form-control" id='weeklyDatePicker' placeholder="Select Week"> <i class="fa fa-calendar icon" aria-hidden="true"></i> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="whatBtn"> <span class="text" id="whatTotal"><span class="day-count">0</span> days, <span class="rod-count">0</span> rod/s</span> <span class="caret"></span> </button> <div class="dropdown-menu"> <div class="selector"> <strong class="">Days</strong> <div class="selection days" data-count="0" data-id="day"> <button type="button" class="btn btn-default btn-sm minus"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button> <span class="count">0</span> <button type="button" class="btn btn-default btn-sm plus" id="what"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> </div> </div> <div class="selector"> <strong class="">Rods</strong> <div class="selection days" data-count="0" data-id="rod"> <button type="button" class="btn btn-default btn-sm minus"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button> <span class="count">0</span> <button type="button" class="btn btn-default btn-sm plus"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> </div> </div> </div> </div> </div> <div class="bottom"> <button type="submit" class="btn btn-primary" id="searchBtn">Search</button> </div> </div> </div>

.card { padding-top: 20px; margin: 10px 0 20px 0; background-color: #ffffff; border: 1px solid #d8d8d8; border-top-width: 0; border-bottom-width: 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .card.hovercard { position: relative; width: 300px; padding-top: 0; overflow: hidden; text-align: center; background-color: #fff; } .card.hovercard img { width: 300px; height: 200px; } .card.hovercard .avatar { position: relative; top: -40px; margin-bottom: -40px; } .card.hovercard .avatar img { width: 80px; height: 80px; max-width: 80px; max-height: 80px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .card.hovercard .info { padding: 4px 8px 10px; } .card.hovercard .info .title { margin-bottom: 4px; font-size: 24px; line-height: 1; color: #262626; vertical-align: middle; } .card.hovercard .info .desc { overflow: hidden; font-size: 12px; line-height: 20px; color: #737373; text-overflow: ellipsis; } .card.hovercard .bottom { padding: 0 20px; margin-bottom: 17px; } .card.people .card-bottom { position: absolute; bottom: 0; left: 0; display: inline-block; width: 100%; padding: 10px 20px; line-height: 29px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }