Compose message

Compose message form in a modal box. Very simple, but useful layout for any application using messages.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- /.modal compose message -->
<div class="modal show" id="modalCompose">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Compose Message</h4>
      </div>
      <div class="modal-body">
        <form role="form" class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-2" for="inputTo">To</label>
            <div class="col-sm-10"><input class="form-control" id="inputTo" placeholder="List of recipients" type="email"></div>
          </div>
          <div class="form-group">
            <label class="col-sm-2" for="inputSubject">Subject</label>
            <div class="col-sm-10"><input class="form-control" id="inputSubject" placeholder="Subject" type="text"></div>
          </div>
          <div class="form-group">
            <label class="col-sm-12" for="inputBody">Message</label>
            <div class="col-sm-12"><textarea class="form-control" id="inputBody" rows="8"></textarea></div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-warning pull-left">Save Draft</button>
        <button type="button" class="btn btn-primary ">Send <i class="fa fa-arrow-circle-right fa-lg"></i></button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal compose message -->