Activity Feed for Bootstrap

Activity Feed displays user posts in Facebook-like style. This front-end component can be easily integrated in your web application. It is fully responsive and with many customization options!

Activity Feed

Bootstrap Activity Feed is built on top of the great Bootstrap 3 framework, but it can be easily integrated in any web application. Thanks to its modularity and customizability, you can use it to implement different kinds of feeds, activity streams, user timelines and more! Activity Feed does not contain any back-end functionality, it is simply front-end component, which can be used in any environment.

  • Name

    Dave Lister

    27. 11. 2015, 15:00

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nibh elit, gravida ac dignissim ut, malesuada ac risus. Nulla maximus odio ut mi dictum commodo.

  • Name

    Dave Lister commented on DWARF-13 - Maintenance

    27. 11. 2015, 15:00

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nibh elit, gravida ac dignissim ut, malesuada ac risus. Nulla maximus odio ut mi dictum commodo.

    Name
    Steve King This is very nice feature
    3 min
    Name
    Steve King Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tortor ipsum, interdum sit amet augue ac, dictum faucibus nunc. Vestibulum non odio sit amet orci vehicula scelerisque quis vel ligula. Nam fermentum eu quam tincidunt imperdiet. Donec sapien nibh, porta ut hendrerit et, faucibus non tortor.
    3 min

Features

Bootstrap 3 extension

Built on top of Bootstrap 3.3, simple and easyy to use / customize.

Fully Responsive

Independent modules are like lego blocks (image, media, text, metadata, actions). Responsive for all types of screens.

Share / Like actions

Activity feeds usually come with like, share and comment buttons. Extend them by any other actions you want.

Comments for collaboration

Enhance feed by user interaction. Comments component is provided out-of-the-box.

Documentation

All features are documented and commented. Integration to your app will be easy.

LESS components

Components are written in LESS, which gives you powerfull tools for development.

Examples

Facebook-like posts

You can implement very robust user interface with image previews, video links and other content types of content.

<ul class="list-block">

  <li class="list-block-item box">
      <div class="media box-header">
        <div class="media-left">
          <div class="media-object">
            <img src="http://i.pravatar.cc/50?img=14" alt="Name">
          </div>
        </div>
        <div class="media-body">
          <h3 class="media-title"><a href="#">Justine Henderson</a></h3>

          <div class="media-meta">
            <small class="timestamp">27. 11. 2015, 15:00</small>
          </div>
        </div>
      </div>

      <div class="box-body">
        <p>Let the future tell the truth, and evaluate each one according to his work and accomplishments. The present is theirs; the future, for which I have really worked, is mine.</p>
      </div>

      <div class="box-body">
        <button class="icontype" data-toggle-class="is-active">
          <span class="icontype-icon">
            <svg viewBox="0 0 24 24" class="icontype-shape icontype-share">
              <use class="shape-default" xlink:href="#shape-share"></use>
              <use class="shape-active" xlink:href="#shape-share-inverse"></use>
            </svg>
          </span>
          <span class="icontype-label">3</span>
        </button>

        <button class="icontype is-active" data-toggle-class="is-active">
          <span class="icontype-icon">
            <svg viewBox="0 0 24 24" class="icontype-shape icontype-heart">
              <use class="shape-default" xlink:href="#shape-heart"></use>
              <use class="shape-active" xlink:href="#shape-heart-inverse"></use>
            </svg>
          </span>
          <span class="icontype-label">7</span>
        </button>

        <button class="icontype" data-toggle-class="is-active">
          <span class="icontype-icon">
            <svg viewBox="0 0 24 24" class="icontype-shape icontype-comment">
              <use class="shape-default" xlink:href="#shape-comment"></use>
              <use class="shape-active" xlink:href="#shape-comment-inverse"></use>
            </svg>
          </span>
          <span class="icontype-label">2</span>
        </button>
      </div>

      <div class="box-actions dropdown">
        <button id="more-options-1" type="button" class="dropdown-toggle icontype icontype-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          <span class="sr-only">Post Options</span>
          <span class="icontype-icon">
            <svg class="icontype-shape" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg>
          </span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="more-options-1">
          <li><a href="#">Share post</a></li>
          <li><a href="#">Copy public link</a></li>
          <li><a href="#">Hide post</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Report</a></li>
        </ul>
      </div>
  </li>

  <li class="list-block-item box">
      <div class="media box-header">
        <div class="media-left">
          <div class="media-object">
            <img src="http://i.pravatar.cc/50?img=14" alt="Name">
          </div>
        </div>
        <div class="media-body">
          <h3 class="media-title"><a href="#">Angela Walker</a></h3>

          <div class="media-meta">
            <small class="timestamp">27. 11. 2015, 15:00</small>
          </div>
        </div>
      </div>

      <div class="box-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nibh elit, gravida ac dignissim ut, malesuada ac risus. Nulla maximus odio ut mi dictum commodo. </p>

        <div class="image image-fit">
          <img src="assets/images/sunflower-650.jpg">
        </div>
      </div>

      <div class="box-actions dropdown">
        <button id="more-options-1" type="button" class="dropdown-toggle icontype icontype-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          <span class="sr-only">Post Options</span>
          <span class="icontype-icon">
            <svg class="icontype-shape" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg>
          </span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="more-options-1">
          <li><a href="#">Share post</a></li>
          <li><a href="#">Copy public link</a></li>
          <li><a href="#">Hide post</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Report</a></li>
        </ul>
      </div>
  </li>

  <li class="list-block-item box">
      <div class="media box-header">
        <div class="media-left">
          <div class="media-object">
            <img src="http://i.pravatar.cc/50?img=14" alt="Name">
          </div>
        </div>
        <div class="media-body">
          <h3 class="media-title"><a href="#">Jonathon Sheppard</a></h3>

          <div class="media-meta">
            <small class="timestamp">27. 11. 2015, 15:00</small>
          </div>
        </div>
      </div>

      <div class="box-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nibh elit, gravida ac dignissim ut, malesuada ac risus. Nulla maximus odio ut mi dictum commodo. </p>
      </div>

      <div class="box-body">
        <button class="icontype" data-toggle-class="is-active">
          <span class="icontype-icon">
            <svg viewBox="0 0 24 24" class="icontype-shape icontype-share">
              <use class="shape-default" xlink:href="#shape-share"></use>
              <use class="shape-active" xlink:href="#shape-share-inverse"></use>
            </svg>
          </span>
          <span class="icontype-label">3</span>
        </button>

        <button class="icontype is-active" data-toggle-class="is-active">
          <span class="icontype-icon">
            <svg viewBox="0 0 24 24" class="icontype-shape icontype-heart">
              <use class="shape-default" xlink:href="#shape-heart"></use>
              <use class="shape-active" xlink:href="#shape-heart-inverse"></use>
            </svg>
          </span>
          <span class="icontype-label">7</span>
        </button>

        <button class="icontype" data-toggle-class="is-active">
          <span class="icontype-icon">
            <svg viewBox="0 0 24 24" class="icontype-shape icontype-comment">
              <use class="shape-default" xlink:href="#shape-comment"></use>
              <use class="shape-active" xlink:href="#shape-comment-inverse"></use>
            </svg>
          </span>
          <span class="icontype-label">2</span>
        </button>
      </div>


      <div class="box-footer comment-list">
        <div class="media comment">
          <div class="media-left">
            <div class="media-object">
              <img src="http://i.pravatar.cc/32" alt="Name">
            </div>
          </div>
          <div class="media-body">
            <div class="comment-body">
              <a class="comment-author" href="#">Hadassah Hartman</a> Agupered nestu lipsa gerem</p>
            </div>

            <div class="comment-footer">
              <abbr class="comment-date" title="21. duben 2017 v 16:28" data-utime="1492784927">3 min</abbr>
            </div>
          </div>
        </div><!-- /comment -->

        <div class="media comment">
          <div class="media-left">
            <div class="media-object">
              <img src="http://i.pravatar.cc/32" alt="Name">
            </div>
          </div>
          <div class="media-body">
            <div class="comment-body">
              <a class="comment-author" href="#">Dave Lister</a>
              <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tortor ipsum, interdum sit amet augue ac, dictum faucibus nunc. Vestibulum non odio sit amet orci vehicula scelerisque quis vel ligula.</span> <span>Nam fermentum eu quam tincidunt imperdiet. Donec sapien nibh, porta ut hendrerit et, faucibus non tortor.</span>
            </div>

            <div class="comment-footer">
              <abbr class="comment-date" title="21. duben 2017 v 16:28" data-utime="1492784927">3 min</abbr>
            </div>
          </div>
        </div><!-- /comment -->

        <div class="media comment-form is-collapsed">
          <div class="media-left">
            <div class="media-object">
              <img src="http://i.pravatar.cc/32" alt="Name">
            </div>
          </div>
          <div class="media-body">
            <textarea class="form-control" placeholder="Leave a comment..." rows="1" cols="30"></textarea>
          </div>
        </div>

      </div><!-- /comment-list -->



      <div class="box-actions dropdown">
        <button id="more-options-1" type="button" class="dropdown-toggle icontype icontype-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          <span class="sr-only">Post Options</span>
          <span class="icontype-icon">
            <svg class="icontype-shape" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg>
          </span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="more-options-1">
          <li><a href="#">Share post</a></li>
          <li><a href="#">Copy public link</a></li>
          <li><a href="#">Hide post</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Report</a></li>
        </ul>
      </div>
  </li>

  <li class="list-block-item box">
      <div class="media box-header">
        <div class="media-left">
          <div class="media-object">
            <img src="http://i.pravatar.cc/50" alt="Name">
          </div>
        </div>
        <div class="media-body">
          <h3 class="media-title"><a href="#">James Finn</a></h3>

          <div class="media-meta">
            <small class="timestamp">1. 9. 2015, 08:00</small>
          </div>

        </div>
      </div>

      <div class="box-body">
        <p>Just amazing...</p>

        <div class="media media-fit">
          <iframe class="media-object" src="https://www.youtube.com/embed/6v2L2UGZJAM" frameborder="0" allowfullscreen></iframe>
        </div>
      </div>
  </li>

  <li class="list-block-item box">
        <div class="media box-header">
          <div class="media-left">
            <div class="media-object">
              <img src="http://i.pravatar.cc/50" alt="Name">
            </div>
          </div>
          <div class="media-body">
            <h3 class="media-title"><a href="#">James Finn</a></h3>

            <div class="media-meta">
              <small class="timestamp">1. 9. 2015, 08:00</small>
            </div>

          </div>
        </div>

        <div class="box-body">
          <p>I would definitely want to go there!</p>

          <div class="media media-block">
            <div class="media-left size-half">
              <div class="media-fit ratio-16-9">
                <iframe class="media-object" src="https://player.vimeo.com/video/99275308" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/99275308">The Best Mentawai Islands Surf Video from my drone, Phyllis.  June 2014,  by Paul Borrud</a> from <a href="https://vimeo.com/user12285054">Paul Borrud</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
              </div>
            </div>
            <div class="media-body">
              <h4>The Best Mentawai Islands Surf Video from my drone, Phyllis.  June 2014,  by Paul Borrud</h4>
            </div>
          </div>
        </div>
    </li>
</ul>

Trackers, CRMs or project management apps

Every decent collaboration tool has a way to track changes in projects. Use Bootstrap Activity Feed as a starting point to implement front-end of such web application.

User Timelines

User Timeline is a popular way to share information within any social network. Share many types of content, from simple text statuses to complex content like YouTube videos.

  • Name

    Justine Henderson

    27. 11. 2015, 15:00

    Let the future tell the truth, and evaluate each one according to his work and accomplishments. The present is theirs; the future, for which I have really worked, is mine.

  • Name

    Angela Walker

    27. 11. 2015, 15:00

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nibh elit, gravida ac dignissim ut, malesuada ac risus. Nulla maximus odio ut mi dictum commodo.

  • Name

    Jonathon Sheppard

    27. 11. 2015, 15:00

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nibh elit, gravida ac dignissim ut, malesuada ac risus. Nulla maximus odio ut mi dictum commodo.

    Name
    Hadassah Hartman Agupered nestu lipsa gerem
    3 min
    Name
    Dave Lister Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tortor ipsum, interdum sit amet augue ac, dictum faucibus nunc. Vestibulum non odio sit amet orci vehicula scelerisque quis vel ligula. Nam fermentum eu quam tincidunt imperdiet. Donec sapien nibh, porta ut hendrerit et, faucibus non tortor.
    3 min
  • Name

    James Finn

    1. 9. 2015, 08:00

    Just amazing...

Customization

Bootstrap Activity Feed provides independent modules, which can be customized simply by changing value of a set of variables. You are able to influence colors, spacing, typography and completely change visual style of the feed.

Learn more

Activity Feed component is part of Skywalkapps, set of components and extensions for Bootstrap Framework. Skywalkapp gives you fine quality components, which will save you a lot of development time.

Created with care by Martin Staněk, Twitter: @koucik, Github: @skywalkapps