Bootstrap Thumbnail Grid Not Starting a New Row Correctly

Bootstrap thumbnail grid not starting a new row correctly

It's a height issue.

I'm solving the same thing right now, and you basically have two options if you want to ditch the extraneous row containers, and have the whole set of columns grid out in a single row responsively:

you can make sure that all of the elements in your grid are the same height by constraining the content with css (or by simply controlling the content that gets shoved into each element)
You can add a little jQuery code to your page to scan your thumbnail elements, and expand their containers to the same height as the largest element in the grid. Google around for equal height jQuery plugins—there are a bunch. One additional thing you'll need to ensure that you do as well is to trigger the plugin again on resize, as it's likely that your elements will wind up with different heights again due to the responsive behaviours allowing content to expand/contract. A combination of bootstrap's col classes and a bit of jQuery height-balancing is working quite well for me.

My thumbnails in a row are not side by side (Instead stacking on top of each other)

Problem:

img by default act as block level element and occupy the full width space. So while in xs screen size, it occupies 100% of the width while in md screen size mode, it just occupies 50% of width.

Also, anchor tags do not take width values. You will need to include display: block before specifying width. Fixing either one of the problems can lead up to the solution.

Solution:

You need to change your markup. Wrap the thumbnails inside a grid class instead of inline style.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" /><div class="row">  <div class="col-xs-4">    <a href="#" class="thumbnail">      <img src="http://placehold.it/200x200" alt="...">    </a>  </div>  <div class="col-xs-4">    <a href="#" class="thumbnail">      <img src="http://placehold.it/200x200" alt="...">    </a>  </div>  <div class="col-xs-4">    <a href="#" class="thumbnail">      <img src="http://placehold.it/200x200" alt="...">    </a>  </div>
</div>
<div class="row">  <div class="col-xs-4">    <a href="#" class="thumbnail">      <img src="http://placehold.it/200x200" alt="...">    </a>  </div>  <div class="col-xs-4">    <a href="#" class="thumbnail">      <img src="http://placehold.it/200x200" alt="...">    </a>  </div>  <div class="col-xs-4">    <a href="#" class="thumbnail">      <img src="http://placehold.it/200x200" alt="...">    </a>  </div></div>

Margin problems with thumbnails in Bootstrap

I would guess that the bootstrap adds a left margin to all elements, except for the first one. You could add a style like this:

ul.thumbnails li.span4:nth-child(3n + 4) {
  margin-left : 0px;
}

But be aware that this is not compatible with older ie browsers...

another way you could do it, is to add a class to every forth li in your php loop (call it something like .noLeftMargin, and set the css accordingly.

bootstrap thumbnails not stacking properly

No, height of divs is not the issue. Issue is that you must put only three divs with .span4 class in one div with .row-fluid class. And if you want more divs with .span4 you must create new div with .row-fluid class and put those new .span4 divs inside. See Twitter bootstrap official documentation.

For example, this is valid Twitter Bootstrap markup

<div class="row-fluid">
   <div class="span4"></div>
   <div class="span4"></div>
   <div class="span4"></div>
</div>

<div class="row-fluid">
   <div class="span4"></div>
   <div class="span4"></div>
   <div class="span4"></div>
</div>

<div class="row-fluid">
   <div class="span12"></div>
</div>

<div class="row-fluid">
   <div class="span8"></div>
   <div class="span1"></div>
   <div class="span3"></div>
</div>

Here is working demo with your code >>> http://jsfiddle.net/Z3VwZ/1/

Bootstrap Grid System new line does not look nice

This is due to varying column height. You need a "clearfix" reset every 3 columns to force even wrapping. One way is to use the approach recommended by Bootstrap, or in this specific case you can use a simple CSS clearfix like this..

@media (min-width:992px) {
    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
}

Demo: http://codeply.com/go/mONLiFj30T

For other "clearfix" scenarios with different col width and grid tiers, there is a universal CSS only clearfix solution which will fit more scenarios (unsupported).

Another solution would be CSS columns, for a "masonry" style layout, but it doesn't use the Bootstrap grid:
http://www.bootply.com/mYkzRDvbEq

See my more complete answer on this issue

Why is my bootstrap (3) grid not responsive?

So after try it's actually work well:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="row text-center" style="display:flex; flex-wrap:wrap">  <div class="col-md-3 col-sm-6">    <div class="thumbnail">      <img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">      <div class="caption">        <h4>test </h4>      </div>    </div>  </div>  <div class="col-md-3 col-sm-6">    <div class="thumbnail">      <img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">      <div class="caption">        <h4>test </h4>      </div>    </div>  </div>  <div class="col-md-3 col-sm-6">    <div class="thumbnail">      <img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">      <div class="caption">        <h4>test </h4>      </div>    </div>  </div>  <div class="col-md-3 col-sm-6">    <div class="thumbnail">      <img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">      <div class="caption">        <h4>test </h4>      </div>    </div>  </div></div></div>

How to correctly add in a row to bootstrap to fix grid system moving onto multiple lines

You can create another variable $j = 0 and add row every 3rd small blog post.

<?php
/* 
 * Template Name: 
 */

get_header();
get_template_part('inc/carousel');

$the_query = new WP_Query( [
    'posts_per_page' => 14,
    'paged' => get_query_var('paged', 1)
] );

if ($the_query->have_posts()) {
?> 
<div id="ajax"> 
<?php
    $i = 0;
    $j = 0;
    while ($the_query->have_posts()) {
        $the_query->the_post();

        if ($i % 7 === 0) { // Large post: on the first iteration and every 7th post after... 
?> 
<div class="row"> 
<article <?php
            post_class('col-sm-12 col-md-12');
?>> 
<div class="large-front-container"> 
<?php
            the_post_thumbnail('full', array(
                'class' => 'large-front-thumbnail'
            ));
?> 
</div> 
<h2><a class="front-page-post-title" href="<?php
            the_permalink();
?>"><?php
            the_title();
?></a></h2> 
<p class="front-page-post-excerpt"><?php
            echo get_the_excerpt();
?></p> 
<div class="front-page-post-info"> 
<a class="moretext" href="<?php
            the_permalink();
?>">Read more</a> 
<?php
            get_template_part('front-shop-the-post');
?> 
<?php
            get_template_part('share-buttons');
?> 
<div class="front-comments"><?php
            comments_popup_link('0', '1', '%', 'comment-count', 'none');
?></div> 
</div> 
</article> 
</div> 

<?php

        } else { // Small posts 
?> 
<?php
            if ($j % 3 === 0)
                echo '<div class="row">';
?> 
<article <?php
            post_class('col-md-4');
?>> 
<?php
            the_post_thumbnail('full', array(
                'class' => 'medium-front-thumbnail'
            ));
?> 
<h2><a class="front-page-post-title" href="<?php
            the_permalink();
?>"><?php
            the_title();
?></a></h2> 
<p class="front-page-post-excerpt"><?php
            echo get_the_excerpt();
?></p> 
<div class="front-page-post-info"> 
<a class="moretext" href="<?php
            the_permalink();
?>">Read more</a> 
<?php
            get_template_part('front-shop-the-post');
?> 
<?php
            get_template_part('share-buttons');
?> 
<div class="front-comments"><?php
            comments_popup_link('0', '1', '%', 'comment-count', 'none');
?></div> 
</div> 
</article> 

<?php
            $j++;
            if ($j % 3 === 0)
                echo '</div>';
?> 
<?php
        }
        $i++;
    }
?> 

</div> 
<?php
    if (get_query_var('paged') < $the_query->max_num_pages) {
        load_more_button();
    }
} elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
    echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();

Bootstrap Thumbnail Grid Not Starting a New Row Correctly