horizontaly scrolling list of cards by dragging - javascript

i am making a website with bootstrap css html and js and i do not know how to make it so that the cards of products move sideways without having to use the scrollbar and just by clicking and dragging
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<h1 class="mt-5">Bootstrap 4 Horizontal Scrolling</h1>
<p class="subtitle">Horizontal scrolling without CSS. Just copy scrolling wrapper classes</p>
<div class="scrolling-wrapper row flex-row flex-nowrap mt-4 pb-4 pt-2">
<div class="col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
</div>
</div>
i do not mind if it is js bootstrap or anything btw im new to coding


It is made of bootstrap 4 and some custom style to look more attractive and a JavaScript which contains a mouse events
Click and Drag Carousel with cards
const slider = document.querySelector('.items');
let isDown = false;
let startX;
let scrollLeft;
slider.addEventListener('mousedown', (e) => {
isDown = true;
slider.classList.add('active');
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
if (!isDown) return; // stop the fn from running
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 3;
slider.scrollLeft = scrollLeft - walk;
});
.items{
overflow: hidden;
user-select: none;
cursor: pointer;
transition: all 0.2s;
transform: scale(0.98);
will-change: transform;
position: relative;
}
.items.active {
cursor: grabbing;
cursor: -webkit-grabbing;
transform: scale(1);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<h1 class="mt-5">Bootstrap 4 Horizontal Scrolling</h1>
<p class="subtitle">Horizontal scrolling without CSS. Just copy scrolling wrapper classes</p>
<div class="items scrolling-wrapper row flex-row flex-nowrap mt-4 pb-4 pt-2">
<div class="item col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
<div class="item col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
<div class="item col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
<div class="item col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I hope I got your point and answered correctly. If not please mention in comment

Related

How to make load more button,showing other rows?

I can't get the code right for my page.
I have 6 rows with 3 columns each, filled with images. When I click "load more" button it doesn't do anything. I tried to change jquery code .slice(0, 3) to (0, 6) etc, but nothing. I need to show only 2 or 3 rows, then when I click load more button, show another 2 or 3 more rows
$(document).ready(function() {
$(".row").slice(0, 3).show();
$("#loadMore").on("click", function(e) {
e.preventDefault();
$(".row:hidden").slice(0, 3).slideDown();
if ($(".row:hidden").length == 0) {
$("#loadMore").text("No Content").addClass("noContent");
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 col-lg-4">
<!-- Card -->
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModalo">
<!-- Card image -->
<img class="card-img-top" height="350" src="images/lule_1.jpg" alt="Card imgage lule">
<!-- Card content -->
<div class="card-body">
<h5 class="my-3">Phone Bag</h5>
<p class="card-text text-uppercase mb-3">Bag,Box</p>
</div>
</a>
<!-- Card -->
<!-- Card -->
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">
<!-- Card image -->
<img class="card-img-top" src="images/lule_4.jpg" alt="Card image lule">
<!-- Card content -->
<div class="card-body">
<h5 class="my-3">Paper Bag</h5>
<p class="card-text text-uppercase mb-3">Bag</p>
</div>
</a>
<!-- Card -->
Load More
</div>
<!-- Grid column -->

You could do this in two way ,
first - initially hide all rows then show first 3
$(document).ready(function(){
$(".row").hide(); //add this line
$(".row").slice(0, 3).show();
$("#loadMore").on("click", function(e){
e.preventDefault();
$(".row:hidden").slice(0, 3).slideDown();
if($(".row:hidden").length == 0) {
$("#loadMore").text("No Content").addClass("noContent");
}
});
})
second - hide last three first
$(document).ready(function(){
$(".row").slice(3, 6).hide();//change this line
$("#loadMore").on("click", function(e){
e.preventDefault();
$(".row:hidden").slice(0, 3).slideDown();
if($(".row:hidden").length == 0) {
$("#loadMore").text("No Content").addClass("noContent");
}
});
})

I don't know jQuery but I wrote it in standard JavaScript, hope it helps!
document.querySelector('#loadMore').addEventListener('click', (button) =>{
//Set number of rows to show
const numRowsToShow = 2
for (let i = 0; i < numRowsToShow; i++) {
//Get the next row non visible (.d-none)
let rowToShow = document.querySelector('.row.d-none')
//If nothing's found change the text of the link and exit the loop
if(!rowToShow){
button.target.text = 'No Content'
button.classList.add('noContent')
break;
}
//show the row
rowToShow.classList.remove('d-none')
}
})

Does it help?
$(document).ready(function() {
var rows = $(".row").toArray();
$(".row").hide();
$(rows.splice(0, 1)).show();
$(document).on("click", "#loadMore", function(e) {
e.preventDefault();
if (!rows.length) {
$("#loadMore").text("No Content").addClass("noContent");
} else {
$(this).remove();
$(rows.splice(0, 1)).slideDown();
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6 col-lg-4">
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModalo">
<img class="card-img-top" height="350" src="images/lule_1.jpg" alt="Card imgage lule">
<div class="card-body">
<h5 class="my-3">Phone Bag</h5>
<p class="card-text text-uppercase mb-3">Bag,Box</p>
</div>
</a>
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">
<img class="card-img-top" src="images/lule_4.jpg" alt="Card image lule">
<div class="card-body">
<h5 class="my-3">Paper Bag</h5>
<p class="card-text text-uppercase mb-3">Bag</p>
</div>
</a>
Load More
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModalo">
<img class="card-img-top" height="350" src="images/lule_1.jpg" alt="Card imgage lule">
<div class="card-body">
<h5 class="my-3">Phone Bag</h5>
<p class="card-text text-uppercase mb-3">Bag,Box</p>
</div>
</a>
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">
<img class="card-img-top" src="images/lule_4.jpg" alt="Card image lule">
<div class="card-body">
<h5 class="my-3">Paper Bag</h5>
<p class="card-text text-uppercase mb-3">Bag</p>
</div>
</a>
Load More
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModalo">
<img class="card-img-top" height="350" src="images/lule_1.jpg" alt="Card imgage lule">
<div class="card-body">
<h5 class="my-3">Phone Bag</h5>
<p class="card-text text-uppercase mb-3">Bag,Box</p>
</div>
</a>
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">
<img class="card-img-top" src="images/lule_4.jpg" alt="Card image lule">
<div class="card-body">
<h5 class="my-3">Paper Bag</h5>
<p class="card-text text-uppercase mb-3">Bag</p>
</div>
</a>
Load More
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModalo">
<img class="card-img-top" height="350" src="images/lule_1.jpg" alt="Card imgage lule">
<div class="card-body">
<h5 class="my-3">Phone Bag</h5>
<p class="card-text text-uppercase mb-3">Bag,Box</p>
</div>
</a>
<a class="card hoverable mb-4" data-toggle="modal" data-target="#basicExampleModal">
<img class="card-img-top" src="images/lule_4.jpg" alt="Card image lule">
<div class="card-body">
<h5 class="my-3">Paper Bag</h5>
<p class="card-text text-uppercase mb-3">Bag</p>
</div>
</a>
Load More
</div>
</div>

col-md-4 property in bootstrap 4 not working in my ejs file

<div class="container">
<div class="row card-deck">
<% for(var i=0;i<campgrounds.length;i++){ %>
<div class="card col-12 col-md-4">
<img class="card-image-top" src="<%= campgrounds[i].image %>" style=width:100%;height:350px;>
<div class="card-body">
<h3 class="card-title"><%= campgrounds[i].name %></h3>
</div>
</div>
<% }%>
</div>
</div>
Here "campgrounds" is a dictionary array with 2 properties("name" and image source). Now this array has 6 items and my col-md-4 should give 3 items in a row in resolutions of medium and above. But, this is not working and there are 12 items in a single row when in large/medium resolutions. Why?

.card in Bootstrap has its own flex properties which override .col-*
You need to add .card as a child div of .col-md-4 and you will see the results.
.col-md-4{ margin: 20px auto; } /* Or use my-* classes */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row card-deck">
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
</div>
</div>
</div>
</div>
</div>

How to do pagination for bootstrap grid?

Here in the above piece of code I succeeded in getting the o/p with table pagination but i'm not getting it for grid pagination.Where It should have only 3 columns and 1 row per a page... I'm not getting the logic please help me... How to do pagination for bootstrap grid? Therefore I deleted table tags and rows and tried to do it by bootstrap grid but i didnt get expected o/p
$(document).ready(function() {
$('#t1').after('<div id="nav" class="text-center"></div>');
var rowsShown = 3;
var rowsTotal = $('#t1 row').length;
var numPages = rowsTotal / rowsShown;
for (i = 0; i < numPages; i++) {
var pageNum = i + 1;
$('#nav').append(' ' + pageNum + '  ');
}
$('#t1 row').hide();
$('#t1 row').slice(0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function() {
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#t1 row').css('opacity', '0.0').hide().slice(startItem, endItem).
css('display', 'table-row').animate({
opacity: 1
}, 300);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div classs="t1">
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="card" style="width: 18rem;">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>

I small changed into you existing JS code so its working as you want so you can check blow snippet.
Changed css('display', 'table-row') to css('display', 'flex').
Added e in $('#nav a').bind('click', function(e) method and this line also e.preventDefault(); for prevent the hash(#) show in url.
Note: Please check on FULL Page
$(document).ready(function() {
$('.t1').after('<div id="nav" class="text-center"></div>');
var rowsShown = 3;
var rowsTotal = $('.t1 .row').length;
var numPages = rowsTotal / rowsShown;
for (i = 0; i < numPages; i++) {
var pageNum = i + 1;
$('#nav').append(' ' + pageNum + '  ');
}
$('.t1 .row').hide();
$('.t1 .row').slice(0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function(e) {
e.preventDefault();
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('.t1 .row').css('opacity', '0').hide().slice(startItem, endItem).
css('display', 'flex').animate({
opacity: 1
}, 300);
});
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="container my-2 t1">
<div class="row">
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="assets\rajetta.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>

Adding a script for search functionality in the webpage

I am trying to add a script for the search filter and having an error in implementing it. Please let me know where I am wrong
I have added the search bar using the code
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
and after that I added the script inside the body tag
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable h4").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header class="my-4">
<h1 class="display-3">Welcome to Open Academy</h1>
</header>
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
<div class="row text-center" id="myTable">
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
</div>
<!-- /.row -->

You need to show something higher than what you are currently finding.
You cannot hide the cards and then try to show the H4 inside the card.
Access $("#myTable .card") instead
Also you abuse a side effect of filter - Either filter on content or toggle on content
If the wrapping div is not hidden, you will get a scattering. So now I toggle the hidden wrapper instead
$(document).ready(function() {
$("#myInput").on("input", function() {
var value = $(this).val().toLowerCase();
$("#myTable .card").each(function() {
$(this).parent().toggle(
$.trim(value)!="" && $(this).text().toLowerCase().indexOf(value) > -1
)
});
});
});
#myTable>div { display:none; float:left; border:1px solid grey; margin:5px; padding:5px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header class="my-4">
<h1 class="display-3">Welcome to Open Academy</h1>
</header>
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
<div class="row text-center" id="myTable">
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
</div>
<!-- /.row -->

You are toggling the h4 instead of the .card that contains it.
You also do not need to toggle while filtering. Filter the ones you want and show them in one go. If you want to go one-by-one then use the .each instead of the .filter
$(document).ready(function() {
$("#myInput").on("input", function() {
var value = $(this).val().toLowerCase();
var allCards = $('#myTable .card');
allCards
.hide() // hide all cards
.filter(function() { // filter the cards that match
var h4text = $(this).find('h4').text().toLowerCase();
return h4text.indexOf(value) > -1;
}).show() // show the filtered cards
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header class="my-4">
<h1 class="display-3">Welcome to Open Academy</h1>
</header>
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
<div class="row text-center" id="myTable">
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
</div>
<!-- /.row -->

Bootstrap 4 Card Image Zoom

How to create my image zoom a little bit when I'm using a Bootstrap 4 components called cards. I got an inspiration at http://www.themezaa.com/html/leadgen/demo/seo-marketing/index.html. The following codes I used below.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="card" >
<img class="card-img-top" src="http://www.successmoves.co.uk/wp-content/uploads/2012/07/50708_1280x720-318x180.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card" >
<img class="card-img-top" src="http://mapleleafadventures.com/wp-content/uploads/2015/11/mv-swell-jeffreynolds-318x180.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card" >
<img class="card-img-top" src="http://www.smart-magazine.com/content/uploads/2016/09/Zaraeeb-el-seed-318x180.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card" >
<img class="card-img-top" src="http://www.professionalyachtingservices.com/wp-content/uploads/2016/06/IMG_0271rr-318x180.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>

You can wrap them in a new element, set overflow: hidden on that element and use scale() on the image when you hover over the parent element. And I also applied a semi-opaque overlay like the site you referenced.
.card-img-wrap {
overflow: hidden;
position: relative;
}
.card-img-wrap:after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(255,255,255,0.3);
opacity: 0;
transition: opacity .25s;
}
.card-img-wrap img {
transition: transform .25s;
width: 100%;
}
.card-img-wrap:hover img {
transform: scale(1.2);
}
.card-img-wrap:hover:after {
opacity: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="card" >
<div class="card-img-wrap"><img class="card-img-top" src="http://www.successmoves.co.uk/wp-content/uploads/2012/07/50708_1280x720-318x180.jpg" alt="Card image cap"></div>
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card" >
<div class="card-img-wrap"><img class="card-img-top" src="http://mapleleafadventures.com/wp-content/uploads/2015/11/mv-swell-jeffreynolds-318x180.jpg" alt="Card image cap"></div>
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card" >
<div class="card-img-wrap"><img class="card-img-top" src="http://www.smart-magazine.com/content/uploads/2016/09/Zaraeeb-el-seed-318x180.jpg" alt="Card image cap"></div>
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card" >
<div class="card-img-wrap"><img class="card-img-top" src="http://www.professionalyachtingservices.com/wp-content/uploads/2016/06/IMG_0271rr-318x180.jpg" alt="Card image cap"></div>
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>

Categories