<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>
<h3>Right Footer </h3>
<section class="box-position">
<div class="container">
<div class="col-xs-12 col-md-3 col-sm-4 pull-right">
<div class="panel">
<div class="panel-heading top-bar" role="tab" id="open-message">
<div class="col-md-10 col-xs-10">
<p class="panel-title"><span class="glyphicon glyphicon-comment"></span>·· Quick Message</p>
</div>
<div class="col-md-2 col-xs-2">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#message" aria-expanded="false" aria-controls="message">
<span class="glyphicon glyphicon-plus"></span></a>
</div>
</div>
</div>
<div id="message" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<form action="#">
<div class="form-group ">
<input type="text" class="form-control" id="name" placeholder="Name" required="required">
</div>