title: How to change the bg color on hover for entire row in bootstrap 3
body: <p>Actuly i want to make a grid tiles like below image</p>
  
  <p><img src="https://i.stack.imgur.com/HrbIi.gif" alt="enter image description here"></p>
  
  <p>My all columns comes in a parent div thats why i am unbale to change the bg color on hover for entire row.
  If i use multiple rows as a parnet for cloumns than these columns wont comes correctly to each other.</p>
  
  <p>HTML:<BR></p>
  
  <pre><code>&lt;div class="container grid-layout"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12 col-md-3 col-sm-3"&gt;
              &lt;div class="name"&gt;Supercity&lt;/div&gt;
         &lt;/div&gt;
  
          &lt;div class="col-xs-12 col-md-3 col-sm-3"&gt;
              &lt;div class="name"&gt;Supercity&lt;/div&gt;
         &lt;/div&gt;
  
         &lt;div class="col-xs-12 col-md-3 col-sm-3"&gt;
              &lt;div class="name"&gt;Supercity&lt;/div&gt;
         &lt;/div&gt;
  
         &lt;div class="col-xs-12 col-md-3 col-sm-3"&gt;
              &lt;div class="name"&gt;Supercity&lt;/div&gt;
         &lt;/div&gt;
  
         &lt;div class="col-xs-12 col-md-3 col-sm-3"&gt;
              &lt;div class="name"&gt;Supercity&lt;/div&gt;
         &lt;/div&gt;
  
         &lt;div class="col-xs-12 col-md-3 col-sm-3"&gt;
              &lt;div class="name"&gt;Supercity&lt;/div&gt;
         &lt;/div&gt;
  
         &lt;div class="col-xs-12 col-md-3 col-sm-3"&gt;
              &lt;div class="name"&gt;Supercity&lt;/div&gt;
         &lt;/div&gt;
  
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:<BR></p>
  
  <pre><code>.grid-layout .row .col-md-3{
      text-align: center;
      border-bottom:#eee solid 1px; 
  }
  .grid-layout .row .col-md-3 &gt; a{
      padding:10px 0;
      display: inline-block;
      width:100%;
      color:#999999;
      outline: none;
  }
  .grid-layout .row .col-md-3 &gt; a:hover{
      color:#5fa9e3;
      text-decoration: none;
  }
  .grid-layout .row .col-md-3:hover{
      background: #f7f7f7;
      cursor: pointer;
  
  }
  .name{
      padding:15px 0;
  }
  </code></pre>
  
  <p>Please let me know what would be the correct approach.</p>