We Keep Coding

i need help to put 3 boxes in one line

I am working on simple HTML web but I am stuck on something like 3 boxes I want accordingly in one line you can check the screenshot of example for that how I want I tried many times to do by every way but I failed to solve or sort out this issue kindly please help me in that
see this screenshot how it showing
Here is the screenshot of the example
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="property-wrap mb-2 row no-gutter" id="pp">
<div class="col-md-4 col-sm-20">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/smart1'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase primary-bg">for rent</span> -->
<a href="https://supershop.ng/smart1" class="image-effect overlay">
<img src="assets/images/smart1-logo.svg" alt="" style="width: 100px; height: 100px; border-radius: 100px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">SuperShopper</h4>
<div class="mb-15">
<p>Lekki Phase 1, Lekki</p>
</div>
</div>
<!--content-->
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/green_way'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase primary-bg">for rent</span> -->
<a href="https://supershop.ng/green_way" class="image-effect overlay">
<img src="assets/images/green_way.png" alt="" style="width: 100px; height: 100px; border-radius: 100px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">GreenWay Supermarket</h4>
<div class="mb-15">
<p>142 Lekki - Epe Expressway, Beside Monarch Event Center, Lekki</p>
</div>
</div>
<!--content-->
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/pjv1'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase bg-blue">for sale</span> -->
<a href="#" class="image-effect overlay">
<img src="assets/images/pjv.png" alt="" style="width: 100px; height: 100px; border-radius: 0px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">PJV Supermarket</h4>
<div class="mb-15">
<p>36b Kusenla Road, Ikate Elegushi, Lekki</p>
</div>
<!--content-->
</div>
<!--content-->
</div>
</div>

how to float divs when using search filter bootstrap

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>

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.

Change another div on hover using only css

I want to change background of div when i hover my link. How can i achieve this? Currently my code looks like this, but it is not working:
<div class="row">
<div class="col-md-12" style="margin-left: 40px; margin-top: 5px;">
<a id="test" href="">
<div id="test1" class="col-xs-2 button-left">
<img class="button-img" src="{{ asset('/img') }}"></img>
</div>
<div class="col-xs-5 button-right">
<h3 style="margin-top: 10px; text-align: center;">#lang('main.data')</h3>
</div>
</a>
</div>
#test:hover ~ #test1 {
display: none;
}
#test:hover>#test1 {
background: red;
}
<div class="row">
<div class="col-md-12" style="margin-left: 40px; margin-top: 5px;">
<a id="test" href="">
<div id="test1" class="col-xs-2 button-left">
<img class="button-img" src="{{ asset('/img') }}"></img>
</div>
<div class="col-xs-5 button-right">
<h3 style="margin-top: 10px; text-align: center;">#lang('main.data')</h3>
</div>
</a>
</div>
</div>

adding multiple cards in a html without using seperate div?

can someone help me out how to generate multiple cards in HTML without adding separate div for each card? the thing is I want the code length to be shorter so I want to use single that is applicable to shorten the length and generate the cards to display in a HTML page.As I'm new to development I'm not able to solve this problem in spite of many searches.

please see this
<div class="row">
<div class="col m4">
<div class="card">
<div class="card-image">
<img src="http://www.ilikewallpaper.net/ipad-wallpapers/download/2268/Square-Pattern-ipad-wallpaper-ilikewallpaper_com.jpg">
<span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Sample1</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
<div class="col m4">
<div class="card">
<div class="card-image">
<img src="http://www.ilikewallpaper.net/ipad-wallpapers/download/2268/Square-Pattern-ipad-wallpaper-ilikewallpaper_com.jpg">
<span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Sample2</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
<div class="fixed-action-btn click-to-toggle" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large red">
<i class="large material-icons">menu</i>
</a>
<ul>
<li><a class="btn-floating red" class="fbtn" href="test.html"><i class="material-icons">home</i></a></li>
<li><a class="btn-floating yellow darken-1" class="fbtn" href="#"><i class="material-icons">work</i></a></li>
<li><a class="btn-floating green" class="fbtn" href="about.html"><i class="material-icons">account_circle</i></a></li>
<li><a class="btn-floating blue" class="fbtn" href="contact.html"><i class="material-icons">speaker_notes</i></a></li>
</ul>
</div>
<div class="clear" style="clear:both; height: 100px;">
</div>
<footer class="ui-footer" style="background:#fafafa; width:100%; position:fixed; z-index:99; clear:both;">
<div class="container">
<p>© Yogesh Singh Choudhary</p>
</div>
</footer>
Thank you

Bootstrap columns enlarge the more I type in a search bar

When typing in to an input search bar, my Bootstrap div .col-xs-4 enlarges, breaking out of it's container. What's odd is, Developer Tools doesn't seem to show any changes in the code that would affect this.
To replicate this problem, try typing the full name of one of the images in this JSFiddle gallery i.e., "Satcom 2016", and watch the div burst out of it's container. Clearing the input then shows that every div has expanded, not just the visible ones.
JSFiddle
https://jsfiddle.net/vadrfgvv/
jQuery
function rowBreak(input) {
$('.col-flex').hide();
if (input) {
$('.row-flex').replaceWith(function() {
return $(this).html();
});
$('.col-flex').wrapAll('<div class="row">');
}
$('.col-visible').each(function(i, e) {
if (((i + 1) % 3 == 0) && ($(this).siblings().length != 2)) {
var x = $('.col-visible:gt(' + i + ')');
$('<div class="row">').append(x).insertAfter(this.closest('div.row'));
}
});
$('.col-visible').show();
}
rowBreak(0);
$('#search').on('keyup', function() {
$('.col-flex').removeClass('col-visible').hide();
var s = $(this).val().toLowerCase();
$('.col-flex').filter(function() {
return $(this).find('h4').text().toLowerCase().indexOf(s) > -1;
}).show().addClass('col-visible');
rowBreak(s);
});
$('#results').on('click', '.panel-search', function() {
$(this).toggleClass('panel-default').toggleClass('panel-success');
$(this).find('.panel-body').toggleClass('bg-green');
var image = $(this).find('img');
var imageID = image.attr('id');
// alert(image.width());
if ($(this).hasClass('panel-success')) {
image.clone().appendTo('.panel-include').removeClass('img-thumbnail').css('margin-bottom', '20px').attr('id', 'x' + imageID).wrap('<p></p>');
} else {
$('.panel-include').find(('#x' + imageID)).closest('p').remove();
}
if ($('.panel-include > p').length == 0) {
$('.panel-include').find('em').show();
} else {
$('.panel-include').find('em').hide();
}
});
$('.btn-save').on('click', function(e) {
e.preventDefault();
var logos = '';
$('.panel-include').find('p').each(function() {
imageID = $(this).find('img').attr('id');
logos += imageID;
});
if (logos) {
logos = logos.substr(1);
}
$("input[name=ids]").val(logos);
$(this).closest('form').submit();
});
HTML
<div class="container-fluid">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
<input class="form-control" id="search" type="text" placeholder="Search...">
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
Your Chosen Content
</h4>
</div>
<div class="panel-body panel-include">
<em class="text-muted">Click on some images to add them here.</em>
</div>
</div>
<form action="#" method="get">
<input type="hidden" name="ids" value="">
<p class="text-right">
<button class="btn btn-primary btn-save" type="submit">
<i class="fa fa-save"></i> Save
</button>
</p>
</form>
</div>
<div class="col-xs-9">
<div id="results">
<div class="row row-flex">
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
AEClim
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=AEClim" id="1">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
AEMET
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=AEMET" id="2">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
AME
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=AME" id="3">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
APMG
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=APMG" id="4">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
ATC Network
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=ATC+Network" id="5">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
Meteomet
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=Meteomet" id="6">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
MMC 2016
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=MMC+2016" id="7">
</div>
</div>
</div>
<div class="col-xs-4 col-flex col-visible">
<div class="panel panel-search panel-default">
<div class="panel-heading">
<h4 class="panel-title">
Satcom 2016
</h4>
</div>
<div class="panel-body">
<img class="img-responsive img-thumbnail img-gallery" src="http://placehold.it/160x100/cccccc/9a9a9a/&text=Satcom+2016" id="8">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I initially thought it was the .img-responsive class that was causing problems (maybe the image was enlarging when the div was hidden?), but it seems like the image doesn't actually enlarge with the div, so that rules that out.
I'm not sure where else to start debugging.
Note: I have kept the entirety of the Javascript that affects these page elements in my question/Fiddle, in case it is something there that is causing the problem.

.row {
margin-right: -15px;
margin-left: -15px;
}
This CSS is the cause of your problem. i didn't see exactly how, but your js code nesting a row for every character typed. and with this css in bootstrap.css each nested row grows larger and larger. the images expand too.
what you can do is, overwrite this css in your html file with <style> tag. something like:
<style>
.row{
margin-right:0px;
margin-left:0px;
}
</style>
but you should know this is only a quick fix. a hack. if i was in your place, i'd look for the reason why your code is nesting a row for every character.