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: