<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div class="container">
    <div class="row">
        <a href="#" class="btn btn-info  send-message-btn" role="button"><i class="fa fa-search"></i> Search</a>
        <a href="#" class="btn btn-info  send-message-btn" role="button"><i class="fa fa-gears"></i> Settings</a>
    </div>
    <div class="row">
        <div class="conversation-wrap col-md-3">
            <div class="media conversation">
                <a class="pull-left" href="#">
                    <img class="media-object img-circle"  style="width: 50px; height: 50px;" src="http://bootdey.com/img/Content/user_2.jpg">
                </a>
                <div class="media-body">
                    <h5 class="media-heading">Michael clarkt</h5>
                    <small class="text-muted">Lorem ipsum dolor...</small>
                </div>
            </div>
 
            <div class="media conversation">
                <a class="pull-left" href="#">
                    <img class="media-object img-circle"  style="width: 50px; height: 50px;" src="http://bootdey.com/img/Content/user_1.jpg">
                </a>
                <div class="media-body">
                    <h5 class="media-heading">Pauline mothg</h5>
                    <small class="text-muted">Cras commodo...</small>
                </div>
            </div>
 
            <div class="media conversation">
                <a class="pull-left" href="#">
                    <img class="media-object img-circle" style="width: 50px; height: 50px;" src="http://bootdey.com/img/Content/user_3.jpg">
                </a>
                <div class="media-body">
                    <h5 class="media-heading">Manuel mcKlein</h5>
                    <small class="text-muted">Cras sit amet...</small>
                </div>
            </div>
 
            <div class="media conversation">
                <a class="pull-left" href="#">
                    <img class="media-object img-circle" style="width: 50px; height: 50px;" src="http://bootdey.com/img/Content/User_for_snippets.png">
                </a>
                <div class="media-body">
                    <h5 class="media-heading">Markt prame</h5>
                    <small class="text-muted">Morbi felis...</small>
                </div>
            </div>
 
            <div class="media conversation">
                <a class="pull-left" href="#">
                    <img class="media-object img-circle"style="width: 50px; height: 50px;" src="http://bootdey.com/img/Content/user-453533-fdadfd.png">
                </a>
                <div class="media-body">
                    <h5 class="media-heading">Bort snudert</h5>
                    <small class="text-muted">Vivamus semper...</small>
                </div>
            </div>
 
            <div class="media conversation">
                <a class="pull-left" href="#">
                    <img class="media-object img-circle" style="width: 50px; height: 50px;" src="http://bootdey.com/img/Content/HexGames349.jpg">
                </a>
                <div class="media-body">
                    <h5 class="media-heading">Maria monthg</h5>
                    <small class="text-muted">cursus ac...</small>
                </div>
            </div>
        </div>
 
 
 
        <div class="message-wrap col-md-8">
            <div class="msg-wrap">
                <div class="media msg ">
                    <a class="pull-left" href="#">
                        <img class="media-object    img-circle" style="width: 32px; height: 32px;" src="http://bootdey.com/img/Content/user_2.jpg">
                    </a>
                    <div class="media-body">
                        <small class="pull-right time"><i class="fa fa-clock-o"></i> 12:10am</small>
                        <h5 class="media-heading">Pauline mothg</h5>
                        <small class="col-md-10 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis, augue sed euismod varius, nisl metus vestibulum neque, nec dictum est dui et tellus</small>
                    </div>
                </div>
                <div class="alert alert-info msg-date">
                    <strong>Today</strong>
                </div>
                <div class="media msg">
                    <a class="pull-left" href="#">
                        <img class="media-object   img-circle" style="width: 32px; height: 32px;" src="http://bootdey.com/img/Content/user_2.jpg">
                    </a>
                    <div class="media-body">
                        <small class="pull-right time"><i class="fa fa-clock-o"></i> 12:10am</small>
                        <h5 class="media-heading">Pauline mothg</h5>
                        <small class="col-md-10 text-muted">Interdum et malesuada fames ac ante ipsum primis in faucibus. In at lacus ac velit vehicula elementum at a lorem. Nullam quis augue sodales, porttitor orci non"</small>
                    </div>
                </div>
 
                <div class="media msg">
                    <a class="pull-left" href="#">
                        <img class="media-object  img-circle" data-src="holder.js/64x64" alt="64x64" style="width: 32px; height: 32px;" src="http://bootdey.com/img/Content/user_2.jpg">
                    </a>
                    <div class="media-body">
                        <small class="pull-right time"><i class="fa fa-clock-o"></i> 12:10am</small>
                        <h5 class="media-heading">Pauline mothg</h5>
                        <small class="col-md-10 text-muted">consectetur dui. Quisque lacinia vitae lectus placerat dictum. Integer tristique sem a risus egestas, ac accumsan ligula volutpat. Donec at convallis elit"</small>
                    </div>
                </div>
 
                <div class="media msg">
                    <a class="pull-left" href="#">
                        <img class="media-object img-circle" style="width: 32px; height: 32px;" src="http://bootdey.com/img/Content/user_2.jpg">
                    </a>
                    <div class="media-body">
                        <small class="pull-right time"><i class="fa fa-clock-o"></i> 12:10am</small>
                        <h5 class="media-heading">Pauline mothg</h5>
                        <small class="col-md-10 text-muted">Cras commodo ante sit amet nulla porta, sed feugiat lectus accumsan. Maecenas luctus est sed dignissim mattis. Mauris ullamcorper hendrerit est in pharetra text-muted"</small>
                    </div>
                </div>
            </div>
 
            <div class="send-wrap ">
                <textarea class="form-control send-message" rows="3" placeholder="Write a reply..."></textarea>
            </div>
            <div class="btn-panel">
                <button class="btn btn-success" role="button">
                    <i class="fa fa-share"></i> Send Message
                </button>
            </div>
        </div>
    </div>
</div>                
 
<style>
 
.conversation-wrap{
    box-shadow: -2px 0 3px #ddd;
    padding:0;
    max-height: 400px;
    overflow: auto;
}
 
.conversation{
    padding:5px;
    border-bottom:1px solid #ddd;
    margin:0;
 
}
 
.message-wrap{
    box-shadow: 0 0 3px #ddd;
    padding:0;
 
}
 
.msg{
    padding:5px;
    margin:0;
}
 
.msg-wrap{
    padding:10px;
    max-height: 400px;
    overflow: auto;
}
 
.time{
    color:#bfbfbf;
}
 
.send-wrap{
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding:10px;
}
 
.send-message{
    resize: none;
}
 
.highlight{
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
}
 
.send-message-btn{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
 
    border-bottom-right-radius: 0;
}
 
.msg-wrap .media-heading{
    color:#003bb3;
    font-weight: 700;
}
 
.msg-date{
    background: none;
    text-align: center;
    color:#aaa;
    border:none;
    box-shadow: none;
    border-bottom: 1px solid #ddd;
}
 
</style>