After reviewing the documentation, I came to understand the following:
xs = small devices like phones
sm = iPads and other tablets
md = smaller laptops
lg = big laptops and desktops
<div class="col-xs-12 col-md-4 col-lg-3">
<div class="thumbnail"></div>
......
</div>
My expectation is that on mobile phones, the item will take up the full width with "gutters" on either side.
On tablets (sm), I anticipate it will take up 12 columns since I didn't specify anything for "sm."
For laptops (md), I expect three items per row.
And on larger screens (lg), four items per row.
To test responsiveness, I adjust my browser window size. However, when I shrink the window, the items end up being displayed one per row at their smallest sizes (xs and sm) but then they overflow and parts of them become unviewable.
I wonder if I misunderstood the grid system theory or if there's something wrong with what I'm doing.