messages data widget

This bootstrap snippet called "messages data widget" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: messages,widget

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row bootstrap snippets">
    <div class="col-md-6 col-xs-12 col-md-offset-3">
      <div class="panel" id="messge">
        <div class="panel-heading">
          <h3 class="panel-title">Message</h3>
        </div>
        <div class="panel-body">
          <ul class="list-group list-group-full">
            <li class="list-group-item">
              <div class="media">
                <div class="media-left">
                  <span class="avatar avatar-online">
                    <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
                    <i></i>
                  </span>
                </div>
                <div class="media-body">
                  <h5 class="list-group-item-heading">
                    <small class="pull-right">3 days ago</small>
                    Herman Beck
                  </h5>
                  <p class="list-group-item-text">Cogitemus tempora tibique probabo...</p>
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <div class="media">
                <div class="media-left">
                  <span class="avatar avatar-online">
                    <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="">
                    <i></i>
                  </span>
                </div>
                <div class="media-body">
                  <h5 class="list-group-item-heading">
                    <small class="pull-right">3 days ago</small>
                    Mary Adams
                  </h5>
                  <p class="list-group-item-text">Praeter ingenii illa novum...</p>
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <div class="media">
                <div class="media-left">
                  <span class="avatar avatar-busy">
                    <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="">
                    <i></i>
                  </span>
                </div>
                <div class="media-body">
                  <h5 class="list-group-item-heading">
                    <small class="pull-right">3 days ago</small>
                    Caleb Richards
                  </h5>
                  <p class="list-group-item-text">Exquisitis officii tantalo etsi...</p>
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <div class="media">
                <div class="media-left">
                  <span class="avatar avatar-off">
                    <img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="">
                    <i></i>
                  </span>
                </div>
                <div class="media-body">
                  <h5 class="list-group-item-heading">
                    <small class="pull-right">3 days ago</small>
                    June Lane
                  </h5>
                  <p class="list-group-item-text">Artes adamare deorum obiecta...</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{
    margin-top:20px;
    background:#eee;
}

.avatar {
    position: relative;
    display: inline-block;
    width: 40px;
    white-space: nowrap;
    border-radius: 1000px;
    vertical-align: bottom
}

.avatar i {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 100%
}

.avatar img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 0 none;
    border-radius: 1000px
}

.avatar-online i {
    background-color: #4caf50
}

.avatar-off i {
    background-color: #616161
}

.avatar-busy i {
    background-color: #ff9800
}

.avatar-away i {
    background-color: #f44336
}

.avatar-100 {
    width: 100px
}

.avatar-100 i {
    height: 20px;
    width: 20px
}

.avatar-lg {
    width: 50px
}

.avatar-lg i {
    height: 12px;
    width: 12px
}

.avatar-sm {
    width: 30px
}

.avatar-sm i {
    height: 8px;
    width: 8px
}

.avatar-xs {
    width: 20px
}

.avatar-xs i {
    height: 7px;
    width: 7px
}

.list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid transparent;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Jan 16th 2016, 23:09

Views: 2.4K

Rated 5/5 based on 2 reviews