Daily feed

This bootstrap snippet called "Daily feed" 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: feed

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

<div class="row bootstrap snippet">
    <div class="col-md-7 col-xs-12 col-md-offset-3">
      <div class="panel" id="daily-feed">
        <div class="panel-heading">
          <h3 class="panel-title">Daily feed
            <span class="pull-right label label-round label-warning">10 Messages</span>
          </h3>
        </div>
        <div class="panel-body">
          <ul class="list-group list-group-dividered list-group-full">
            <li class="list-group-item">
              <div class="media">
                <div class="media-left">
                  <a class="avatar avatar-online" href="javascript:void(0)">
                    <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt=""><i></i></a>
                </div>
                <div class="media-body">
                  <h4 class="media-heading">
                    <small class="pull-right">5m ago</small>
                    <a class="name">Edward Fletcher</a> posted a new blog.
                  </h4>
                  <small>Today 5:50 pm - 12.04.2015</small>
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <div class="media">
                <div class="media-left">
                  <a class="avatar avatar-off" href="javascript:void(0)">
                    <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt=""><i></i></a>
                </div>
                <div class="media-body">
                  <h4 class="media-heading">
                    <small class="pull-right">2h ago</small>
                    <a class="name">Justin Martin</a> posted message on
                    <a class="name">Crystal Bates</a> site.
                  </h4>
                  <small>Today 2:55 pm - 12.04.2015</small>
                  <div class="actions margin-top-10">
                    <button type="button" class="btn btn-danger btn-xs waves-effect waves-light"><i class="icon md-thumb-up" aria-hidden="true"></i>Like</button>
                    <button type="button" class="btn btn-danger btn-xs waves-effect waves-light"><i class="icon md-favorite" aria-hidden="true"></i>Love</button>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <div class="media">
                <div class="media-left">
                  <a class="avatar avatar-away" href="javascript:void(0)">
                    <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt=""><i></i></a>
                </div>
                <div class="media-body">
                  <h4 class="media-heading">
                    <small class="pull-right">6h ago</small>
                    <a class="name">Terrance Arnold</a> posted message on
                    <a class="name">Nathan Watts</a> site.
                  </h4>
                  <small>Today 12:00 am - 12.04.2015</small>
                  <div class="content well">
                    Aspernatur ad aspernari sapienter constringendos conspiratione locatus. Ii maiores
                    aequo tollit, profecta iucundo pueros assentior velit circumcisaque
                    error fastidium nostros. Utuntur deserunt solvantur.
                  </div>
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <div class="media">
                <div class="media-left">
                  <a class="avatar avatar-busy" href="javascript:void(0)">
                    <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt=""><i></i></a>
                </div>
                <div class="media-body">
                  <h4 class="media-heading">
                    <small class="pull-right">20h ago</small>
                    <a class="name">Heather Harper</a> started following
                    <a class="name">Terrance Arnold</a>.
                  </h4>
                  <small>Yesterday 9:00 pm - 11.04.2015</small>
                </div>
              </div>
            </li>
          </ul>
          <button type="button" class="btn btn-block btn-primary waves-effect waves-light"><i class="icon md-chevron-down margin-right-5" aria-hidden="true"></i>Show
            More</button>
        </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;
    font-size: 14px;
}

.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;
}
#daily-feed .name {
    font-weight: 500;
    color: #616161;
    cursor: pointer;
    text-decoration: none;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.5

Created: Jan 16th 2016, 23:15

Views: 2.8K

Rated 5/5 based on 3 reviews