Isotope and Bootstrap3: Content divs disappear on sorting - twitter-bootstrap-3

Question

This must be fairly simple, but I'm puzzled.
The content divs disappear on sorting.
And I missing the correct data-filter? Or a display:none or display:block?
Codepen: http://codepen.io/anon/pen/oYXXPq (You can clone it to make changes.)
HTML:
<ul id="filters">
<li>Everything</li>
<li>Blog</li>
<li>CISO</li>
<li>LABS</li>
</ul>
<div class="container-fluid">
<div id="isotope-blog">
<div class="grid">
<div class="grid-sizer col-xs-12 col-md-6"></div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content blog">Blog Blog Blog</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content blog">Blog Blog Blog</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content ciso">CISO CISO CISO</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content labs">LABS LABS LABS</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content labs">LABS LABS LABS</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content labs">LABS LABS LABS</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content ciso">CISO CISO CISO</div>
</div><div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content security-blog">BLOG BLOG BLOG</div>
</div>
</div>
</div>
</div>
CSS:
.grid-item-content {
max-height: 120px;
background: #0D8;
border: 2px solid #000;
overflow:hidden;
}
.container-fluid {
max-width:1200px;
}
jQuery:
jQuery(function ($) {
var $container = $('#isotope-blog'); //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;
});
});

Answer 1

This now works: http://codepen.io/anon/pen/oYXXPq
It is a two column Masonry and Bootstrap layout sortable by a filter class in the grid-item div element. The filter class can be multiple, different classes.
Problems were:
My HTML markup was too complex and wrong; it needs to be in the format:
<div class="container">
<div class="isotope-list">
<div class="row">
<div class="grid-item blog">OneOneOneOne Blog Blog Blog</div>
<div class="grid-item blog">TwoTwoToTwoTwoTwo Blog Blog Blog </div>
and on and on...
</div>
</div>
There were small changes needed to the CSS.
And my Javascript needed to make and clear updates to the selected categories:
var selectedCategory;
var $grid = $('.isotope-list').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 160,
gutter: 20
},
getSortData: {
selectedCategory: function( itemElem ) {
return $( itemElem ).hasClass( selectedCategory ) ? 0 : 1;
}
}
});
var $items = $('.row').find('.grid-item');
$('.sort-button-group').on( 'click', '.button', function() {
// set selectedCategory
selectedCategory = $( this ).attr('data-category');
if ( selectedCategory == 'all' ) {
$grid.isotope({
sortBy: 'original-order'
});
}
// update sort data now that selectedCategory has changed
$grid.isotope('updateSortData');
$grid.isotope({ sortBy: 'selectedCategory' });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});