0

I use the following code to create three-column rows:

<div class="container">
  <div class="row">
    <!-- Column [1] -->
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
      <h4>Four or Five Title Words</h4>
      <img src="a-thumbnail.jpg">
      <span>A short description</span>
    </div>

    <!-- Column [2] -->
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
      <h4>Four or Five Title Words</h4>
      <img src="a-thumbnail.jpg">
      <span>A short description</span>
    </div>

    <!-- Column [3] -->
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
      <h4>Four or Five Title Words</h4>
      <img src="a-thumbnail.jpg">
      <span>A short description</span>
    </div>
  </div>
  <div class="row">...</div>
  <div class="row">...</div>
  <div class="row">...</div>
</div>

Here is the straightforward desired result: n rows of three columns each

[1][2][3]
[1][2][3]
[1][2][3]
[1][2][3]
[1][2][3]

Some rows display fine, but others have one or more columns pushed to the next row at the large and medium break points, like so:

[1][2][3]
[1][2][3]
   [1][2]
      [3]
[1][2][3]
[1][2][3]
      [1]
   [2][3]
[1][2][3]

Notice that these are right aligned as well. The image in each div is very small, so size doesn't appear to be a factor. There really isn't much text either, just a few words. The content in each div is fairly similar to all the others.

Does anyone have a suggestion as to how to troubleshoot or resolve? Thanks.

JRomeo
  • 543
  • 1
  • 4
  • 20
  • which bootstrap version are you using – localhost Aug 11 '17 at 15:13
  • 1
    Sidenote: You don't need to specify all screen sizes in classes. using `col-md-4 col-xs-12` Would yeild the same results. If you want to be more verbose that's fine, I just wanted to make sure you knew. – Don Aug 11 '17 at 15:18
  • It might be because you are not using `img-responsive` on your image. See if [this](https://codepen.io/codearts/pen/Evvaxb) answer your question – localhost Aug 11 '17 at 15:24
  • Using V3. I haven't tried img-responsive, but those thumbnails are tiny. For what it's worth, the same thing happens if I try it with 4 columns (e.g., col-lg-3). – JRomeo Aug 11 '17 at 16:13
  • Have you applied any external css of your own? I wasn't able to replicate the behavior you mentioned with the snippet you provided. – Rahul Viswanath Aug 11 '17 at 16:58

0 Answers0