Bootstrap snippet: Messages

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: messages,chat



<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <div class="container bootstrap snippet"> <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>
.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; }
Dey-Dey

Messages

Dey-Dey
  Apr 29th 2015, 10:20
3.6K Views