How to display multiple elements using bootstrap grid system and React Js

Question

I have the following code, which is intended to get a list of a user's repositories on GitHub and display them using Bootstrap's Grid System.
The intention is to display 3 repos per row, but I cannot figure out how to close the row div after every 3 repos, but currently all of them are being placed in one row, which overflows and distorts the order.
The code I currently have is in the Jsbin link below.
http://jsbin.com/macifezapi/edit?html,js,output
Thanks in advance for any help

Answer 1

Twitter's Bootstrap Grid System has many classes that fit your requirements like 'col-lg-** col-md-** col-sm-** col-xs-**'. Take a look at this:

http://getbootstrap.com/css/#grid

To ensure that elements stack into identical rows and columns, assign a class with a fixed height to all elements:

http://jsbin.com/xipijo/edit?html,css,js

Also, consider using a template to render your GitHub repositories to html:

http://handlebarsjs.com/

Answer 2

Just put the elements in col-md-4. The boostrap grid, has 12 rows, so by giving each element a width of 4/12, you end up with 3 elements per row.

JS bin: http://jsbin.com/macifezapi/1/edit?html,js,output

Depending on which width you want to the rows to break into a mobile layout (each column taking 100% width) you can use col-lg-4, col-md-4, col-sm-4 or col-xs-4. For more information see Boostrap grid system. There is no need for manually calculation 3 rows, and putting an row wrapper around them!

Update:

Becuase the columns have different heights, the grid system causes the different columsn to have different anounts of items. This doesn't look good at all.Easiest solution is to add a default height to each item, that way the grid system workds correct again.

Another solution, if only modern borwser have to be supported, is to use the new flexbox technique.

Here is an example: http://jsbin.com/muzepubupu/edit?html,css,js,output

A good description how flexbox works can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/