Bootstrap chat simple layout

bootstrap-chat-simple-layout.markdown

Bootstrap chat simple layout

For internal chat project

A Pen by Mike on CodePen.

License.

index.html

<h2 class="text-center">Chat</h2>
<div class="container">
  <div class="message-candidate center-block">
    <div class="row">
      <div class="col-xs-8 col-md-6">
        <img src="http://imgc.allpostersimages.com/images/P-473-488-90/68/6896/2GOJ100Z/posters/despicable-me-2-minions-movie-poster.jpg" class="message-photo">
        <h4 class="message-name">Mr. Minion</h4>
      </div>
      <div class="col-xs-4 col-md-6 text-right message-date">Date here</div>
    </div>
    <div class="row message-text">
        text over here text over here text over here text over here text over here text over here text over here text over here text over here 
    </div>
  </div>
  <div class="message-hiring-manager center-block">
    <div class="row">
      <div class="col-xs-8 col-md-6">
        <img src="http://imgc.allpostersimages.com/images/P-473-488-90/68/6896/2GOJ100Z/posters/despicable-me-2-minions-movie-poster.jpg" class="message-photo">
        <h4 class="message-name">Mr. Minion</h4>
      </div>
      <div class="col-xs-4 col-md-6 text-right message-date">Date here</div>
    </div>
    <div class="row message-text ">
        text over here text over here text over here text over here text over here text over here text over here text over here text over here 
    </div>
  </div>
  <div class="messaging center-block">
    <div class="row">
      <div class="col-md-12">
        <div class="input-group">
          <input type="text" class="form-control">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">Send</button>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

style.css

.message-candidate {
  background: rgba(223, 229, 121, 0.9);
  padding: 40px;
  max-width: 600px;
  margin-bottom: 10px;
}

.message-hiring-manager {
  background: rgba(0, 167, 204, 0.9);
  padding: 40px;
  max-width: 600px;
  margin-bottom: 10px;
}

.messaging {
  max-width: 600px;
  margin-top: 20px;
}

.message-text {
  margin-top: 10px;
}

.message-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
  display: inline-block;
}

.message-name {
  margin-left: 10px;
  display: inline-block;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />