On my Bootstrap 4 page, I've incorporated cards that can be searched, displaying only those with matching titles. However, I am facing two main issues. Firstly, when two matching cards are on the same row, they overlap. Secondly, if a matching card is on a different row, it does not move up to the first row. Despite trying various solutions, I have been unsuccessful in resolving these issues. I am seeking guidance on what steps I should take or where I should focus my efforts.
<html lang="en" dir="ltr">
<head>
...
</body>
</html>
$(document).ready(function(){
$('#search').on("keyup", function() {
...
});
});
// Media queries for different screen sizes and custom CSS styles
.body{
...
}
.card{
...
}
.card-columns{
...
}
.card-body {
...
}
.card-deck{
...
}
.navbar{
...
}
.navbar-custom{
...
}
.container-fluid-nav{
...
}
.btn{
...
}
button.btn {
...
}
h2{
...
}
img {
...
}
.release-date{
...
}
.no-results{
display: none;
}