Images not displaying correctly using bootstrap grid


I am trying to have 6 images per row but its not working. It happened to me earlier using Materialize so I switched to Bootstrap hoping that would help. Maybe someone can see what is going here.

I will post an image of what it looks like and some code.

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link href="" rel="stylesheet">

  {{> Nav}}
    {{> AddMovie}}
    {{#if currentUser}}
    <div class="row movie-div">
      {{# each movies}}
        {{> MoviesList}}
      {{/ each}}
    <h1 class="please-login center-align">Please Log In</h1>
<template name="MoviesList">
  <div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">
    <a href="#{{divId}}"><img class="{{genre}} shadow img-responsive" src="{{img}}"></a>

  <!--  <div id="{{divId}}" class="well hide">
      <div class="">
        <h1>{{name}} ({{release}})</h1>
        <a class="delete-movie"></a>
    </div> -->