/* eslint-disable no-unused-vars*/
import React, { Component, PropTypes } from 'react';
/* eslint-enable no-unused-vars*/

import Icons from 'components/Icons/';

const IconBar = () => {
  let children = Object.keys(Icons).map(key => {
    let Icon = Icons[key];
    return (
      <Icon key={key} style={ { display: 'inline-block', width: '5vw' } } />
    );
  });
  return (
    <div style={ {
      position: 'absolute',
      top: '75%',
      width: '100%',
      background: 'linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6))',
      textAlign: 'center' } }
    >
      {children}
    </div>
  );
};

export default IconBar;


@@ -154,16 +154,66 @@
 Icons/';
+%0Aimport %7B Grid, Row, Col %7D from 'react-bootstrap';
 %0A%0Aconst 
@@ -270,19 +270,28 @@
 ns).map(
+(
 key
+, index)
  =%3E %7B%0A  
@@ -397,11 +397,11 @@
 h: '
-5vw
+10%25
 ' %7D 
@@ -418,16 +418,246 @@
 ;%0A  %7D);%0A
+  let rowsOfChildren = (%0A    %3CGrid%3E%0A      %3CRow%3E%0A        %3CCol xs=%7B12%7D sm=%7B6%7D%3E%0A          %7Bchildren.slice(0, 7)%7D%0A        %3C/Col%3E%0A        %3CCol xs=%7B12%7D sm=%7B6%7D%3E%0A          %7Bchildren.slice(7)%7D%0A        %3C/Col%3E%0A      %3C/Row%3E%0A    %3C/Grid%3E%0A  );%0A%0A
   return
@@ -861,25 +861,31 @@
    %3E%0A      %7B
-c
+rowsOfC
 hildren%7D%0A   

Split icons into responsive grid