Fix the posters not aligned in the poster list

src/public/js/components/list/poster.js

@@ -3,7 +3,20 @@ import React from 'react'
 export default function ListPoster(props) {
   const selected = props.selected ? ' thumbnail-selected' : '';
   const imgClass = 'thumbnail' + selected;
+  const displayClearFixLg = (props.index % 6) === 0;
+  const displayClearFixMd = (props.index % 4) === 0;
+  const displayClearFixSm = (props.index % 2) === 0;
   return (
+    <div>
+      {displayClearFixLg &&
+        <div className="clearfix visible-lg"></div>
+      }
+      {displayClearFixMd &&
+        <div className="clearfix visible-md"></div>
+      }
+      {displayClearFixSm &&
+        <div className="clearfix visible-sm"></div>
+      }
       <div className="col-xs-12 col-sm-6 col-md-3 col-lg-2">
         <a className={imgClass}>
           <img
@@ -12,5 +25,6 @@ export default function ListPoster(props) {
           />
         </a>
       </div>
+    </div>
   );
 }

src/public/js/components/list/posters.js

@@ -48,6 +48,7 @@ export default function ListPosters(props) {
           const selected = (el.imdb_id === props.selectedImdbId) ? true : false;
           return (
             <ListPoster
+              index={index}
               data={el}
               key={el.imdb_id}
               selected={selected}