how to float divs when using search filter bootstrap

Question

I have created a gallery that gets filtered two ways. One by click of a button and the other with a search filter. Filters are working perfectly, except when divs are hidden on filter the remaining showing divs do not float next to each other.

this is what it looks like before filtered:

After filtering this is what it looks like:

How can I get it all of dancer2 to be next to each other and only start a new row every 4 dancers?

 $(document).ready(function() { $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $(".column").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); 

 .column { float: right; display: none; /* Hide columns by default */ } .content { background-color: white; padding: 10px; text-align: center; } .show { display: block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="row container" style="margin: auto;"> <div class="col-sm-4"> <input type="text" id="myInput" placeholder="Search for names.."> </div> <div class="col-sm-8" style="text-align: right;"> <div id="myBtnContainer" class="container" style="padding-bottom: 2rem;"> <button class="btn active" onclick="filterSelection('all')"> Show all</button> <button class="btn" onclick="filterSelection('teachera')"> teachera</button> <button class="btn" onclick="filterSelection('teacherb')"> teacherb</button> <button class="btn" onclick="filterSelection('teacherc')"> teacherc</button> </div> </div> </div> <!--DANCER GALLERY--> <div class="row container" style="margin: auto; margin-bottom: 2rem;"> <div class="col-sm-3 column teachera"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250" alt="Dancer1" style="width:80%; height: 200px;"> <h4>Dancer1</h4> <p>teachera</p> </div> </a> </div> <div class="col-sm-3 column teachera"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250" alt="Dancer2" style="width:80%; height: 200px;"> <h4>Dancer2</h4> <p>teachera</p> </div> </a> </div> <div class="col-sm-3 column teachera"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250" alt="Dancer3" style="width:80%; height: 200px;"> <h4>Dancer3</h4> <p>teachera</p> </div> </a> </div> <div class="col-sm-3 column teachera"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250" alt="Dancer4" style="width:80%; height: 200px;"> <h4>Dancer4</h4> <p>teachera</p> </div> </a> </div> </div> <div class="row container" style="margin: auto; margin-bottom: 2rem;"> <div class="col-sm-3 column teacherb"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250/ff0000" alt="Dancer1a" style="width:80%; height: 200px;"> <h4>Dancer1</h4> <p>teacherb</p> </div> </a> </div> <div class="col-sm-3 column teacherb"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250/ff0000" alt="Dancer2a" style="width:80%; height: 200px;"> <h4>Dancer2</h4> <p>teacherb</p> </div> </a> </div> <div class="col-sm-3 column teacherb"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250/ff0000" alt="Dancer3a" style="width:80%; height: 200px;"> <h4>Dancer3</h4> <p>teacherb</p> </div> </a> </div> <div class="col-sm-3 column teacherb"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250/ff0000" alt="Dancer4a" style="width:80%; height: 200px;"> <h4>Dancer4</h4> <p>teacherb</p> </div> </a> </div> </div> <div class="row container" style="margin: auto; margin-bottom: 2rem;"> <div class="col-sm-3 column teacherc"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250/ffff00" alt="Dancer1b" style="width:80%; height: 200px;"> <h4>Dancer1</h4> <p>teacherc</p> </div> </a> </div> <div class="col-sm-3 column teacherc"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250/ffff00" alt="Dancer2b" style="width:80%; height: 200px;"> <h4>Dancer2</h4> <p>teacherc</p> </div> </a> </div> <div class="col-sm-3 column teacherc"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250/ffff00" alt="Dancer3b" style="width:80%; height: 200px;"> <h4>Dancer3</h4> <p>teacherc</p> </div> </a> </div> <div class="col-sm-3 column teacherc"> <a href="#" class="link"> <div class="content"> <img src="http://placehold.it/175x250/ffff00" alt="Dancer4b" style="width:80%; height: 200px;"> <h4 class="dancerName">Dancer4</h4> <p>teacherc</p> </div> </a> </div> </div> 

Answer 1

When you declare a new div with the "row" class it will start a new row. If you want all of those elements to show side-by-side, they should all be in the same "row" div. The bootstrap styles will automatically keep a maximum of 4 pictures side-by-side and wrap to a new row (because you have col-sm-3 as the class for the individual pictures). Bootstrap rows go up to 12 units long. Each time a new element is added, if it exceeds the 12, it will wrap to the next line.