Im trying to use Bootstrap 5 card group with tiny slider.
Tiny slider changing Bootstrap Card width.
Tiny slider autoWidth and fixedWidth not fixing Card Width.
HTML Code
<div class="card-group" id="slider">
<div class="card m-3" >
<img src="image/card1.png" alt="">
<div class="body">
<h6 class="card-title text-center m-0">Lorem, ipsum dolor.</h6>
<p class="card-text text-muted text-center"><small class="">Rs 99999</small></p>
</div>
</div>
<div class="card m-3" >
<img src="image/card1.png" alt="">
<div class="body">
<h6 class="card-title text-center m-0">Lorem, ipsum dolor.</h6>
<p class="card-text text-muted text-center"><small class="">Rs 99999</small></p>
</div>
</div>
<div class="card m-3" >
<img src="image/card1.png" alt="">
<div class="body">
<h6 class="card-title text-center m-0">Lorem, ipsum dolor.</h6>
<p class="card-text text-muted text-center"><small class="">Rs 99999</small></p>
</div>
</div>
<div class="card m-3" >
<img src="image/card1.png" alt="">
<div class="body">
<h6 class="card-title text-center m-0">Lorem, ipsum dolor.</h6>
<p class="card-text text-muted text-center"><small class="">Rs 99999</small></p>
</div>
</div>
</div>
Tiny Slider
slider = tns({
"container": "#slider",
"nav": false,
"items": 4,
"gutter": 10,
"swipeAngle": false,
"speed": 400,
});
Related
i'm creating nav tabs using css, and in the tab i provide a slider ( i use slick carousel ) for some reason when the tab is active all the cards are aligned horizontally, but after i go to other tabs the card changes to vertical, does anyone know Why does this happen ?
thanks
<section>
<style>
.tabs-location {
border-bottom: 3px solid #951942;
padding-bottom: 1rem;
}
.tabs-location>li.active>a,
.tabs-location>li.active>a:focus,
.tabs-location>li.active>a:hover {
color: #fff;
background-color: #951942;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 align='center'>Testing Location vOffice</h3>
<div class="container">
<ul id="myTabs" class="nav nav-pills nav-justified tabs-location" role="tablist" data-tabs="tabs">
<li class="active">Jakarta</li>
<li>Tangerang</li>
<li>Bekasi</li>
<li>Surabaya</li>
<li>Bali</li>
<li>Medan</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="jakarta">
<div class="responsive-location">
<div>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div role="tabpanel" class="tab-pane fade" id="tangerang">
<div class="responsive-location">
<div>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<div role="tabpanel" class="tab-pane fade" id="bekasi">Bekasi</div>
<div role="tabpanel" class="tab-pane fade" id="surabaya">Surabaya</div>
<div role="tabpanel" class="tab-pane fade" id="bali">Bali</div>
<div role="tabpanel" class="tab-pane fade" id="medan">Medan</div>
</div>
</div>
</div>
</div>
</div>
</section>
for my js
<script>
$('.responsive-location').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</script>
You can see the live code here
https://voffice.co.id/jakarta-virtual-office/index-dummy#testing
I'm trying to swap a div's contents in a Bootstrap 5 row structure on hover. I'm currently trying to use Jquery for this but the method isn't working. It doesn't show any errors whatsoever, just doesn't work.
I don't care much if this can be done in JS or CSS, just need a solution that can replace div contents on hover. Additionally, if there could be a replacement animation (fade or slide) that'd be great.
$('.switch').hover(function() {
$(this).find('start1').hide();
$(this).find('switched').show();
}
, function() {
$(this).find('switched').hide();
$(this).find('start1').show();
}
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container my-5">
<div class="row gx-5 switch text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main1.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 1</h2>
</div>
<div class="switched" style="background: #D86241; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text here
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main2.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 2</h2>
</div>
<div class="switched2" style="background: #A1274C; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<img src="images/main3.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 3</h2>
</div>
<div class="switched3" style="background: #771E3A; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
</div>
<div class="d-grid col-2 mx-auto" style="margin-top:50px;">
<button type="button" class="btn btn-success btn-lg rounded-pill heading" name="button"> About us</button>
</div>
</div>
You were close with the JavaScript. this ends up being the .switch element, so you can use that as the context for the selector. Obviously you'll need to update the logic to handle all of the menu items.
$('.switch').hover(function() {
$('.start1', this).hide();
$('.switched', this).show();
}, function() {
$('.switched', this).hide();
$('.start1', this).show();
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container my-5">
<div class="row gx-5 switch text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main1.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 1</h2>
</div>
<div class="switched" style="background: #D86241; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text here
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main2.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 2</h2>
</div>
<div class="switched2" style="background: #A1274C; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<img src="images/main3.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 3</h2>
</div>
<div class="switched3" style="background: #771E3A; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
</div>
<div class="d-grid col-2 mx-auto" style="margin-top:50px;">
<button type="button" class="btn btn-success btn-lg rounded-pill heading" name="button"> About us</button>
</div>
</div>
Alternatively, here is a CSS-based approach
.switch:hover>.start1,
.switch:hover>.start2,
.switch:hover>.start3 {
display: none !important;
}
.switched,
.switched2,
.switched3 {
display: none;
}
.switch:hover>.switched,
.switch:hover>.switched2,
.switch:hover>.switched3,
.start1,
.start2,
.start3 {
display: block;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container my-5">
<div class="row gx-5 switch text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main1.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 1</h2>
</div>
<div class="switched" style="background: #D86241">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text here
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main2.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 2</h2>
</div>
<div class="switched2" style="background: #A1274C;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<img src="images/main3.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 3</h2>
</div>
<div class="switched3" style="background: #771E3A;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
</div>
<div class="d-grid col-2 mx-auto" style="margin-top:50px;">
<button type="button" class="btn btn-success btn-lg rounded-pill heading" name="button"> About us</button>
</div>
</div>
So I figured out a solution using CSS. Turns out the whole thing was much simpler than I thought.
Here's the Codepen.
HTML :
<div class="container my-5 px-5">
<div class="row switch gx-5 text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<!-- OG content -->
<img src="https://via.placeholder.com/200" class="img-fluid hider mb-3 h-50" alt="">
<h2 class="headingGreen hider">A heading</h2>
<!-- Hover content -->
<h2 class="display-5 heading shower">A heading</h2>
<p class="lead shower">
Some text
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<!-- OG content -->
<img src="https://via.placeholder.com/200" class="img-fluid h-50 mb-3 hider" alt="">
<h2 class="headingGreen hider">A heading</h2>
<!-- Hover content -->
<h2 class="display-5 heading shower">A heading</h2>
<p class="lead shower">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<!-- OG content -->
<img src="https://via.placeholder.com/200" class="img-fluid mb-3 h-50 hider" alt="">
<h2 class="headingGreen hider">A heading</h2>
<!-- Hover content -->
<h2 class="display-5 heading shower">A heading</h2>
<p class="lead shower">
Some text
</p>
</div>
</div>
</div>
CSS :
.start1{
transition: background-color .25s;
}
.start2{
transition: background-color .25s;
}
.start3{
transition: background-color .25s;
}
.start1:hover{
background-color: #D86241;
}
.start2:hover{
background-color: #A1274C;
}
.start3:hover{
background-color: #771E3A;
}
.shower{
display: none;
color: white;
text-align: left !important;
}
.start1:hover .hider,
.start2:hover .hider,
.start3:hover .hider
{
display: none;
}
.start1:hover .shower,
.start2:hover .shower,
.start3:hover .shower
{
display: block;
}
I am new to javascript and HTML. I developed website using node + express backend and using bootstrap + html + JS in front end. I have created few cards using BS4. It looks like following
Code:
<section id="cards">
<div class="container">
<div class="card-deck text-center">
<div class="card shadow-sm" id="mainCards">
<div class="card-header" id="mainCardHeader">
<h4 class="my-0 font-weight-normal">Total Cases</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><%= areaTotal%></h1>
</div>
</div>
<div class="card shadow-sm" id="mainCards">
<div class="card-header" id="mainCardHeader">
<h4 class="my-0 font-weight-normal">Last 30 days</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><%= arealast30%></h1>
</div>
</div>
<div class="card shadow-sm" id="mainCards">
<div class="card-header" id="mainCardHeader">
<h4 class="my-0 font-weight-normal">Last 7 days</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><%= arealast7%></h1>
</div>
</div>
<div class="card shadow-sm" id="mainCards">
<div class="card-header" id="mainCardHeader">
<h4 class="my-0 font-weight-normal">Growth</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><%= areaR%></h1>
</div>
</div>
<div class="card shadow-sm" id="mainCards">
<div class="card-header" id="mainCardHeader">
<h4 class="my-0 font-weight-normal">Deaths</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><%= areaDeaths%></h1>
</div>
</div>
</div>
</div>
</section>
I want to add one more card if count>0. I have created external div before 5th card and it is working fine with following script.
var deathCount = <%- areaDeaths%>;
if (deathCount == 0){
document.getElementById("divDeath").style.display = "none";
};
However new card is not aligned correctly. Is it anyway I can make 5th element of such id disappear without harming alignment of these cards.
tried so far:
var deathCount = <%- areaDeaths%>;
if (deathCount == 0){
var elements = document.getElementById("mainCards").children;
elements.item(4).style.display = "none";
};
I am trying to sort divs through their internal content in static HTML page. I am able to sort the content but how can i append the complete div back to page? Any suggestions?
var orderedDivs = $('.col-md-3 .card-body .card-title').sort(function(a, b) {
return String.prototype.localeCompare.call($(a).text().toLowerCase(), $(b).text().toLowerCase());
});
console.log(orderedDivs);
<div class="col-md-3">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">John Doe</h5>
<h6 class="card-subtitle">Designation1</h6>
<p class="card-text">Lorem Ipsum</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">Mary Jane</h5>
<h6 class="card-subtitle">Designation2</h6>
<p class="card-text">Lorem Ipsum 2</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">David Rock</h5>
<h6 class="card-subtitle">Designation3</h6>
<p class="card-text">Lorem Ipsum 3</p>
</div>
</div>
</div>
Try this: apply sorting on col-md-3 divs and inside sorting apply localCompare on title and return the element.
replace sorted divs in the parent element, I have replaced it in body.
$(document).ready(function(){
var $sortedDiv = $('.col-md-3').sort(function(a,b){
var text1 = $(a).find('.card-body .card-title').text();
var text2 = $(b).find('.card-body .card-title').text();
return String.prototype.localeCompare.call(text1.toLowerCase(),text2.toLowerCase());
});
$('body').html($sortedDiv);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="col-md-3">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">John Doe</h5>
<h6 class="card-subtitle">Designation1</h6>
<p class="card-text">Lorem Ipsum</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">Mary Jane</h5>
<h6 class="card-subtitle">Designation2</h6>
<p class="card-text">Lorem Ipsum 2</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">David Rock</h5>
<h6 class="card-subtitle">Designation3</h6>
<p class="card-text">Lorem Ipsum 3</p>
</div>
</div>
</div>
Add the whole html to a div and set paste back the content
$("document").ready(function(){
var orderedDivs = $('.col-md-3').sort(function(a, b) {
return String.prototype.localeCompare.call($(a).data('title').toLowerCase(), $(b).data('title').toLowerCase());
});
$("#content").html(orderedDivs);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="content">
<div class="col-md-3" data-title="John Doe">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">John Doe</h5>
<h6 class="card-subtitle">Designation1</h6>
<p class="card-text">Lorem Ipsum</p>
</div>
</div>
</div>
<div class="col-md-3" data-title="Mary Jane">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">Mary Jane</h5>
<h6 class="card-subtitle">Designation2</h6>
<p class="card-text">Lorem Ipsum 2</p>
</div>
</div>
</div>
<div class="col-md-3" data-title="David Rock">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">David Rock</h5>
<h6 class="card-subtitle">Designation3</h6>
<p class="card-text">Lorem Ipsum 3</p>
</div>
</div>
</div>
</div>
How do i filter the results based on card-title ?
Quick Look at : https://codepen.io/anon/pen/zyqemK
JQUERY:
$(document).ready(function(){
$("#myInput").on("keyup", function() {
<NEED HELP HERE>
});
});
HTML:
<body>
<div class="col-sm-10 col-sm-offset-1 col-md-11 col-md-offset-1 main">
<input type="text" id="myInput" value="" class="form-control form-control-lg form-control-borderles" placeholder="Filtering | Search Bar">
</input>
</div>
<br>
<div class="py-5">
<div class="container" id="MyCards">
<div class="row hidden-md-up">
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
link
Second link
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
link
Second link
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
link
Second link
</div>
</div>
</div>
</div><br>
<div class="row hidden-md-up">
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
link
Second link
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
link
Second link
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
link
Second link
</div>
</div>
</div>
</div><br>
<body>
<div class="py-5">
<div class="container">
<div class="row hidden-md-up">
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
link
Second link
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
link
Second link
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
link
Second link
</div>
</div>
</div>
</div><br>
<div class="row hidden-md-up">
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
link
Second link
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
link
Second link
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">DIFF title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
<p class="card-text p-y-1">Some quick example text to build on the card title .</p>
link
Second link
</div>
</div>
</div>
</div><br>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
</body>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
</body>
I tweaked the js from your code pen so that it's filtering the card divs, based on their contained h4 text - is that what you're trying to do?
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#MyCards .card").filter(function() {
$(this).toggle($(this).find('h4').text().toLowerCase().indexOf(value) > -1)
});
});
});