<div class="container">
<p>Hover over the card to see the drop shadow added</p>
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="https://dummyimage.com/600x400/000/fff" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://dummyimage.com/600x400/000/fff" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://dummyimage.com/600x400/000/fff" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<!-- /.container -->
body {margin:2rem;}
/*
####################################################
M E D I A Q U E R I E S
####################################################
*/
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
/*
Extra small devices (portrait phones, less than 544px)
No media query since this is the default in Bootstrap because it is "mobile first"
*/
/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {
}
/* Medium devices (tablets, 768px and up)
The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/
@media (max-width: 950px) {
}
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
console.log("document is ready");
$( ".card" ).hover(
function() {
$(this).addClass('shadow-lg').css('cursor', 'pointer');
}, function() {
$(this).removeClass('shadow-lg');
}
);
// document ready
});
