Posted By

jackfrank on 05/14/15

Tagged

Versions (?)

Last Edited at 05/14/15 03:53am

Statistics

Viewed 602 times

Favorited by 0 user(s)

Related snippets

bootstrap snippet Messages

/ Published in: HTML

bootdey bootstrap code snippet messages
http://bootdey.com/

Highlighted TextExpand

<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>

URL: http://bootdey.com/snippets/view/Messages-273

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.