How to display multiple items using bootstrap and React Js

Question

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

Answer 1

Twitter The Bootstrap Grid system has many classes that meet your requirements, such as "col-lg - ** col-md - ** col-sm - ** col-xs - **". Take a look at this:

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

To ensure that the stack elements are in the same rows and columns, assign a fixed-height class to all elements:

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

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

http://handlebarsjs.com/

Answer 2

Just put the elements in col-md-4 . The relaxation grid has 12 rows, therefore, giving each element a width of 4/12, you get 3 elements in a row.

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

Depending on what width you want to split the lines into a mobile layout (each column occupies 100% of the width), you can use col-lg-4 , col-md-4 , col-sm-4 or col-xs-4 . See the Boostrap grid system for more information. There is no need to manually calculate 3 lines and place a wrapper around them around them.

Update:

The mentioned columns have different heights, the grid system leads to the fact that different columsn have different element values. It does not look good. The simplest solution is to add a default height to each element, so that the grid system works correctly again.

Another solution, if you need to support only modern borwser, is to use the new flexbox technique.

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

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