Add Border Between Bootstrap Columns from Twitter Loop
<p>Ok, I have an interesting puzzle to solve.</p>

<p>I have a WordPress site that is outputting a Twitter feed using <a href="https://wordpress.org/plugins/oauth-twitter-feed-for-developers/" rel="nofollow noreferrer">oAuth Twitter Feed for Developers Plugin</a></p>

<p>I needed that plugin because I need to display the 3 most recents tweets from a user horizontally. Here's the code that goes with the plugin:</p>

<pre><code>&lt;div class="container" id="b2btwitter"&gt;
  &lt;?php
    $tweets = getTweets('anthonytravel', 3, array('exclude_replies' =&gt; true, 'include_rts' =&gt; false));
    foreach($tweets as $tweet){
        if($tweet['text']){
          echo '&lt;div id="twitterCol" class="col-xs-6 col-sm-4"&gt;';
            $the_tweet = $tweet['text'];
            foreach($tweet['entities']['user_mentions'] as $key =&gt; $user_mention){
                $the_tweet = preg_replace(
                    '/@'.$user_mention['screen_name'].'/i',
                    '&lt;a href="http://www.twitter.com/'.$user_mention['screen_name'].'" target="_blank"&gt;@'.$user_mention['screen_name'].'&lt;/a&gt;',
                    $the_tweet);
            }
            foreach($tweet['entities']['hashtags'] as $key =&gt; $hashtag){
                $the_tweet = preg_replace(
                    '/#'.$hashtag['text'].'/i',
                    '&lt;a href="https://twitter.com/search?q=%23'.$hashtag['text'].'&amp;src=hash" target="_blank"&gt;#'.$hashtag['text'].'&lt;/a&gt;',
                    $the_tweet);
            }
            foreach($tweet['entities']['urls'] as $key =&gt; $link){
                $the_tweet = preg_replace(
                    '`'.$link['url'].'`',
                    '&lt;a href="'.$link['url'].'" target="_blank"&gt;'.$link['url'].'&lt;/a&gt;',
                    $the_tweet);
            }
            echo '&lt;h1&gt;Anthony Travel&lt;/h1&gt;&lt;h2&gt;&lt;a href="https://www.twitter.com/AnthonyTravel"&gt;@anthonytravel&lt;/a&gt;&lt;/h2&gt;';
            echo '&lt;p&gt;'.$the_tweet.'&lt;/p&gt;';
            echo '&lt;span&gt; -- '.humanTiming(strtotime($tweet['created_at'])) . ' ago&lt;/span&gt;';
            echo '&lt;/div&gt;';
        } else {
            echo '
            &lt;br /&gt;&lt;br /&gt;
            &lt;a href="http://twitter.com/anthonytravel" target="_blank"&gt;Click here to read anthonytravel\'S Twitter feed&lt;/a&gt;';
        }
    }
    function humanTiming ($time)
    {
        $time = time() - $time; // to get the time since that moment
        $tokens = array (
            31536000 =&gt; 'year',
            2592000 =&gt; 'month',
            604800 =&gt; 'week',
            86400 =&gt; 'day',
            3600 =&gt; 'hour',
            60 =&gt; 'minute',
            1 =&gt; 'second'
        );
        foreach ($tokens as $unit =&gt; $text) {
            if ($time &lt; $unit) continue;
            $numberOfUnits = floor($time / $unit);
            return $numberOfUnits.' '.$text.(($numberOfUnits&gt;1)?'s':'');
        }
    }
  ?&gt;
</code></pre>

<p>
Everything works great with this. But what I need is a divider between the tweets. So two dividers. Something like this:</p>

<pre><code>           |           |            
 Tweet 1   |  Tweet 2  |   Tweet 3 
           |           |           
           |           |           
</code></pre>

<p>As you can see, I can't just add a border to the right side of the <code>div</code> because then the last column would have the border. I need to add CSS to one or two of the columns and not the other(s).</p>

<p>Is there a way to do that in JavaScript or something?</p>

<p>My other thought would be to add the twitter feed three separate times, but do the latest tweet minus 1 or something to that effect. I just don't know if that's possible/how to do that with the Twitter API.</p>