Bootstrap responsive layout
This is a small piece of code but few things I'm going to highlight here


When using the col class, it's best practice to have this class under a row class. This creates a grid structure e.g


    &lt;div class="row"&gt;
      &lt;div class="col-sm-4"&gt;.col-sm-4&lt;/div&gt;
      &lt;div class="col-sm-4"&gt;.col-sm-4&lt;/div&gt;
      &lt;div class="col-sm-4"&gt;.col-sm-4&lt;/div&gt;
    &lt;/div&gt;





One thing to note here is that in bootstrap grid structure the total number of columns you can have is 12 . You can read more on that Bootstrap Grids . So these lines defines more than 12 columns and it's abusing bootstrap usage


&lt;div class="col-xs-12 col-sm-6 col-md-4" style="margin-top: 2%;"&gt;
 &lt;div class="col-xs-6 col-sm-6 col-md-6"&gt;





I can see some Inline css declarations floating about, there isn't anything bad with that but it becomes cumbersome when you have many div's in your page. I suggest defining your css in an external stylesheet


I hope this helps