twitter bootstrap - Create dynamic row / column structure using Javascript -

i attempting add rss feed section website. want each story stored in bootstrap column of width 3. attempting add row @ start of every 4th element , closing row on next 4th element. @ moment seem running problems prematurely cutting off rows , ruining formatting.

below js , screenshot of problem.

var rssfeed = new google.feeds.feed("http://www.residentadvisor.net/xml/rss_news.xml"); //rssfeed.setresultformat(google.feeds.feed.xml_format); rssfeed.setnumentries(10); rssfeed.load(showentries);  console.log(rssfeed);  function showentries(result)  {     if (!result.error)     {         var feeds = result.feed.entries;         console.log(feeds);         var rssoutput = "";         (var i=0; i<feeds.length; i++)          {             if (i%4 == 0) {                 rssoutput += '<div class="row">';             }             rssoutput += '<div class="col-md-3">';             rssoutput += '<h3><a href="' + feeds[i].link + '">' + feeds[i].title + '</a></h3><br />';             rssoutput += '<p>' + feeds[i].content + '</p><br/>';             rssoutput += '<i><p>' + feeds[i].publisheddate + '</p></i><br />';             rssoutput += '</div>';              if (i != 0 && i%3 == 0) {                 rssoutput += '</div>';             }         }      document.getelementbyid("latest-news").innerhtml = rssoutput;     } } 

why need have 4 per row?

because bootstrap responsive, should able put of rss feeds in same row , bootstrap adapt.

rssoutput = '<div class="row">'; (var i=0; i<feeds.length; i++) {   rssoutput += '<div class="col-md-3">';   rssoutput += '<h3><a href="' + feeds[i].link + '">' + feeds[i].title + '</a></h3><br />';   rssoutput += '<p>' + feeds[i].content + '</p><br/>';   rssoutput += '<i><p>' + feeds[i].publisheddate + '</p></i><br />';   rssoutput += '</div>'; } rssoutput += '</div>'; 

you add col-xs-6 , col-sm-4 class account smaller display.

rssoutput += '<div class="col-xs-6 col-sm-4 col-md-3">'; 

but that's you.