Fork me on GitHub
Attention: This component is still under progress and experimental.
b:repeat The repeat tag is the basic iteration component of ButterFaces.
Tag attributes
Tag controls
component
                            <!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://xmlns.jcp.org/jsf/html" 
      xmlns:f="http://xmlns.jcp.org/jsf/core" 
      xmlns:b="http://butterfaces.org/components"> 
<h:head> 
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
          rel="stylesheet">
</h:head> 
<body>
    <h:form id="formId">

        <div class="row repeat-episode-list">
           <b:repeat value="#{myBean.values}"
                     var="episode"
                     rendered="true">
              <div class="col-md-4 repeat-episode-item">
                 <img src="#{episode.image}" alt="#{episode.title}"/>
                 <div class="repeat-episode-content">
                 <div><strong>#{episode.title}</strong></div>
                 <div><small>written by: #{episode.writtenBy}</small></div>
                 <b:commandLink value="Play"
                                action="#{repeatShowcase.play}"
                                glyphicon="fa fa-play-circle-o"
                                styleClass="btn btn-outline-secondary btn-sm">
                    <f:ajax execute="@this"/>
                 </b:commandLink>
              </div>
           </b:repeat>
        </div>

    </h:form> 
</body> 
</html>
                        
                            package org.butterfaces.repeat.demo;

import import javax.faces.view.ViewScoped;
import import javax.inject.Named;

@ViewScoped
@Named
public class MyBean implements Serializable {

    private static final String IMAGE_PATH = "resources/images/treebox/";

    private List<Episode> episodes = new ArrayList<Episode>();

    public List<Episode> getValues() {
       if(episodes.isEmpty()) {
          episodes.add(createEpisode(1, "Children of the Gods 1/2",
                                     "Mario Azzopardi",
                                     "Jonathan Glassner & Brad Wright",
                                     "July 27, 1997",
                                     "ChildrenoftheGods.jpg"));
          episodes.add(createEpisode(2, "Children of the Gods 2/2",
                                     "Mario Azzopardi",
                                     "Jonathan Glassner & Brad Wright",
                                     "July 27, 1997",
                                     "ChildrenoftheGods.jpg"));
          ...
       }

        return episodes;
    }

    private static Episode createEpisode(int numberInSeries,
                                         String title,
                                         String directedBy,
                                         String writtenBy,
                                         String originalAirDate,
                                         String image) {
       final Episode episode = new Episode();
       episode.setNumberInSeries(numberInSeries);
       episode.setTitle(title);
       episode.setDirectedBy(directedBy);
       episode.setWrittenBy(writtenBy);
       episode.setOriginalAirDate(originalAirDate);
       episode.setImage(IMAGE_PATH + image);
       return episode;
    }

}
                        
                            package org.butterfaces.repeat.demo;

public class Episode {

    private int numberInSeries;
    private String title;
    private String writtenBy;
    private String originalAirDate;
    private String image;

    // [...] getter + setter

    @Override
    public String toString() {
       return title;
    }

}
                        
                            .repeat-episode-list {
    padding: 0 10px;
    max-height: 400px;
    overflow: auto;
}

.repeat-episode-item repeat-episode-content a {
    position: inherit;
    right: 25px;
    bottom: 20px;
}

.repeat-episode-item img {
    width: 100%;
}

.repeat-episode-item repeat-episode-content {
    opacity: 0.6;
    position: absolute;
    top: 0;
    color: white;
    margin-top: 10px;
    margin-left: 10px;
    height: 100%;
    width: 100%;
}

.repeat-episode-item {
    border: #ddd 1px solid;
    border-radius: 4px;
}

.repeat-episode-item.col-md-4 {
    padding: 5px;
    width: calc(33.33333333% - 12px);
}