Title: Overlapping posts – Isotope, bootstrap and wordpress
Last modified: August 22, 2016

---

# Overlapping posts – Isotope, bootstrap and wordpress

 *  [laerke93](https://wordpress.org/support/users/laerke93/)
 * (@laerke93)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/overlapping-posts-isotope-bootstrap-and-wordpress/)
 * I have searched the internet for almost 4 hours. And I cannot find a solution
   to my problem.
 * I have got the isotope to work with both bootstrap and wordpress. The thing is
   that my posts overlap eachother when I refresh my site. The solution to that 
   should be: (window).load, or image load. But when I implement them to my code,
   the filtering function stops working ..
 * My site: [
    Heres my JS (when it works, but overlapping):
 *     ```
       jQuery(document).ready(function ($) {
   
       	var $container = $('#isotope-list'); //The ID for the list with all the blog posts
   
           $container.isotope({ //Isotope options, 'item' matches the class in the PHP
       		itemSelector : '.item',
         		layoutMode : 'masonry',
       	});
   
       	//Add the class selected to the item that is clicked, and remove from the others
       	var $optionSets = $('#filters'),
       	$optionLinks = $optionSets.find('a');
   
       	$optionLinks.click(function(){
       	var $this = $(this);
       	// don't proceed if already selected
       	if ( $this.hasClass('selected') ) {
       	  return false;
       	}
       	var $optionSet = $this.parents('#filters');
       	$optionSets.find('.selected').removeClass('selected');
       	$this.addClass('selected');
   
       	//When an item is clicked, sort the items.
       	 var selector = $(this).attr('data-filter');
       	$container.isotope({ filter: selector });
   
       	return false;
       	});
   
       });
       ```
   
 * Here is my mark up:
 *     ```
       <div class="container-fluid articlewrapper">
   
               <section class="row">
                   <div class="overskrift2 text-center">
                       <h3>Seneste projekter</h3>
                   </div>
               </section>
   
               <section class="row">
                   <div class="col-lg-12 text-center">
                       <ul id="filters">
                           <li><a href="#" data-filter="*" class="selected">Alle /</a></li>
                           <?php
                               $terms = get_terms("category"); // get all categories, but you can use any taxonomy
                               $count = count($terms); //How many are they?
                               if ( $count > 0 ){  //If there are more than 0 terms
                                   foreach ( $terms as $term ) {  //for each term:
                                       echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . " / " . "</a></li>\n";
                                       //create a list item with the current term slug for sorting, and name for label
                                   }
                               }
                           ?>
                       </ul>
                   </div>
               </section>
   
               <section class="row">
   
                   <?php $the_query = new WP_Query( 'posts_per_page=8' ); //Check the WP_Query docs to see how you can limit which posts to display ?>
   
                       <?php if ( $the_query->have_posts() ) : ?>
   
                       <div id="isotope-list" id="container" >
                       <?php while ( $the_query->have_posts() ) : $the_query->the_post();
                       $termsArray = get_the_terms( $post->ID, "category" );  //Get the terms for this particular item
                       $termsString = ""; //initialize the string that will contain the terms
                           foreach ( $termsArray as $term ) { // for each term
                               $termsString .= $term->slug.' '; //create a string that has all the slugs
                           }
                       ?> 
   
                           <div class="<?php echo $termsString; ?> item col-xs-12 col-sm-4 col-md-3 col-lg-3" onclick="location.href='<?php the_permalink(); ?>';" style="cursor: pointer;"> <?php // 'item' is used as an identifier ?>
                               <div data-content="<?php the_title(); ?>" class="postthumbnail">
                                   <?php if ( has_post_thumbnail() ) {
                                               $attributes = array('class' => 'post-thumbnails img-responsive');
                                               the_post_thumbnail('thumbs', $attributes);
                                       } ?>
                               </div>
                           </div> <!-- end item -->
   
                       <?php endwhile;  ?>
                       </div> <!-- end isotope-list -->
   
                       <?php endif; ?>
               </section>
   
               <section class="row">
   
                   <div class="buttonPad">
   
                       <div class="col-lg-4"></div>
   
                       <div class="col-lg-4 text-center">
                           <a href="http://laerkelyhne.dk/portfolio/kontakt/" class="btn btn-success btn-lg button">Se mere</a>
                       </div>
   
                       <div class="col-lg-4"></div>
   
                   </div>
   
               </section>
           </div>
       ```
   

Viewing 1 replies (of 1 total)

 *  [John O'Seadna](https://wordpress.org/support/users/oseadna/)
 * (@oseadna)
 * [10 years, 9 months ago](https://wordpress.org/support/topic/overlapping-posts-isotope-bootstrap-and-wordpress/#post-5934703)
 * laerke93, I’m having the same issue (more or less). Did you ever find a solution?

Viewing 1 replies (of 1 total)

 The topic ‘Overlapping posts – Isotope, bootstrap and wordpress’ is closed to new
replies.

## Tags

 * [isotope](https://wordpress.org/support/topic-tag/isotope/)
 * [overlap](https://wordpress.org/support/topic-tag/overlap/)

 * 1 reply
 * 2 participants
 * Last reply from: [John O'Seadna](https://wordpress.org/support/users/oseadna/)
 * Last activity: [10 years, 9 months ago](https://wordpress.org/support/topic/overlapping-posts-isotope-bootstrap-and-wordpress/#post-5934703)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics