Pfthb

I have run into a massive headache with boostrap errors on my page when it comes to the grid. I know I have done all that I can to figure out, and spent countless hours trying different things, all to no avail. I have the following code giving me problems. If you want to check out the site in action it is located here: Sample Page

<div class="container">
 <div class="row">
 <div class="prodStyles col-xs-12">
 <h2>ALL PRODUCT STYLES</h2>
 </div>
 </div>

<div class="row">
 <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
 <div class="prodImage">
 <img src="images/roll/king-blue.png" alt="cblue" class="alignnone" />
 </div>

 <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
 <div class="prodStyles">
 <ul>
 <li><span>KINGS</span></li>
 <li>1</li>
 <li>2</li>
 <li>3</li>

 </ul>
 </div>
 </div>

 <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
 <div class="prodImage">
 <img src="/images/roll/king-blue.png" alt="blue" class="alignnone" />
 </div>
 </div>

 <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
 <div class="prodStyles">
 <ul>
 <li><span>KINGS</span></li>
 <li>1</li>
 <li>2</li>
 <li>3</li>

 </ul>
 </div>
 </div>
</div>
</div>
</div> 

I was able to get it close, but it wasn't breaking where I wanted it to for small screens. I would like it to always be a minimum of 2 columns wide, and 4 columns wide for medium screens and above.

I think the only change you need to make is col-md-6 to col-md-3.

<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">

Bootstrap grid works in a way that there are 12 columns in a row. And you divide them however you want - for two columns you set two divs with col-md-6 (for medium resolution, hence md). So, if you want to have 2 columns for small and extra small screens, 4 columns for medium screen, and let's say 6 columns for large screen, your code would look something like this:

<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">

I think you are missing a closure div after first col element on second row. And have 1 extra div of closure outside. try this:

<div class="container">
<div class="row">
 <div class="prodStyles col-xs-12">
 <h2>ALL PRODUCT STYLES</h2>
 </div>
</div>

<div class="row">

 <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
 <div class="prodImage">
 <img src="images/roll/king-blue.png" alt="cblue" class="alignnone" />
 </div>
 </div>

 <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
 <div class="prodStyles">
 <ul>
 <li><span>KINGS</span></li>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
 </div>
 </div>

 <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
 <div class="prodImage">
 <img src="/images/roll/king-blue.png" alt="blue" class="alignnone" />
 </div>
 </div>

 <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
 <div class="prodStyles">
 <ul>
 <li><span>KINGS</span></li>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
 </div>
 </div>
</div>