Create dynamic row / column structure using Javascript

Question

I am attempting to add an RSS feed section to my website. I want each story to be stored in a Bootstrap column of width 3. I am attempting to add a row at the start of every 4th element and then closing the row on the next 4th element. However at the moment I seem to be running into problems with it prematurely cutting off the rows and ruining the formatting.

Below is my JS and a screenshot of my 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 = ""; for (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; } } 

Answer 1

Why do you need to have four per row?

Because bootstrap is responsive, you should be able to put all of the rss feeds in the same row and bootstrap will adapt.

rssoutput = '<div class="row">'; for (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 could also add col-xs-6 and col-sm-4 to the class to account for a smaller display.

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

But that's all up to you.