Why is bootstrap changing a col-md div to 100% width @max-width:991?

Question

I am using bootstrap so it would place my divs nicely next to eachother but whenever I resize my window to 991px width it makes these divs 100% width ...

code :

<div class="row">
  <div class="col-md-2">
     <img src="path..."  style="width: 100%; height: auto">
  </div>
  <div class="col-md-2">
     <img src="path..."  style="width: 100%; height: auto">
  </div>
  <div class="col-md-2">
     <img src="path..."  style="width: 100%; height: auto">
  </div>
  <div class="col-md-2">
     <img src="path..."  style="width: 100%; height: auto">
  </div>
  <div class="col-md-2">
     <img src="path..."  style="width: 100%; height: auto">
  </div>
  <div class="col-md-2">
     <img src="path..."  style="width: 100%; height: auto">
  </div>
</div>

picture (after resizing to 991px width):

Answer 1

Bootstrap 3 is mobile-first, meaning everything is handled as if it's on a small device unless you say otherwise. To change the breakpoint of your columns, use a smaller prefix:

col-xs-2

or

col-sm-2

http://getbootstrap.com/css/#grid

Also, instead of inline styles on your images (yuck), use Bootstrap's responsive image class:

class="img-responsive"

http://getbootstrap.com/css/#images