Visual list items (2 column masonry)

This type of listing uses JavaScript (via the masonry library) to position list items.

This layout is demonstrated using a column size of 12 on mobile and 8 on tabet and above.

NB: If the content of the masonry container changes through Javascript, you can re-trigger a layout by firing a 'reload' event on the container itself.
Example: jQuery('.bc-masonry').trigger('reload');

      
        <div class="col-xs-12 col-md-8 center-block">
          <div class="bc-masonry">
            <div class="bc-masonry-sizer"> </div>
            <article class="bc-list-item-visual bc-list-item--width2 bc-masonry-item bc-masonry-item--width2">
              <a href="#">
                <div class="bc-list-item-media">
                  <img src="#" width="xxx" height="xxx" alt="">
                </div>
                <header class="bc-list-item-header">
                  <h2 class="bc-list-item-title">Listing title</h2>
                </header>
                <div class="bc-list-item-body">
                  Listing body elements id required
                </div>
                <div class="bc-list-item-footer">
                  Listing footer elements if required
                </div>
              </a>
            </article>
            <article class="bc-list-item-visual bc-masonry-item">…</article>
            <article class="bc-list-item-visual bc-masonry-item">…</article>
            <article class="bc-list-item-visual bc-masonry-item">…</article>
            <article class="bc-list-item-visual bc-masonry-item">…</article>
          </div>
        </div>

Example:

Visual list items (3 column masonry)

This layout is demonstrated using a column size of 12 on mobile and above. The JavaScript would pick up on wide screen devices.

        <div class="bc-masonry bc-masonry-width-4">
          <div class="bc-masonry-sizer"> </div>
          <article class="bc-list-item-visual bc-list-item--width2 bc-masonry-item bc-masonry-item--width2">
            <a href="#">
              <div class="bc-list-item-media">
                <img src="#" width="xxx" height="xxx" alt="">
              </div>
              <header class="bc-list-item-header">
                <h2 class="bc-list-item-title">Listing title</h2>
              </header>
              <div class="bc-list-item-body">
                Listing body elements id required
              </div>
              <div class="bc-list-item-footer">
                Listing footer elements if required
              </div>
            </a>
          </article>
          <article class="bc-list-item-visual bc-masonry-item">…</article>
          <article class="bc-list-item-visual bc-masonry-item">…</article>
          <article class="bc-list-item-visual bc-masonry-item">…</article>
          <article class="bc-list-item-visual bc-masonry-item">…</article>
        </div>

Example:

Visual list items (3 column inline)

Visual list items can also be used 'inline' without a masonry layout. In this instance use the bootstrap column containers to wrap the bc-list-item-visual's and add a class of bc-list-item-inline to the list item.

Example:

In this section: