Ad

How To Display Multiple Elements Using Bootstrap Grid System And React Js

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

Ad

Answer

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/

Ad
source: stackoverflow.com
Ad