I was trying to create a Bootstrap card that has a 'slideshow' embedded. I want to use the other page to give more info about the first page. I was editing this on web and got to a fairly presentable product(https://gph.is/2NgOkWh) however when I tried it on my phone it was completely broken.
I attached the main code, leaving out the library links and some other default information.
Please let me know how I could correct this, I'd really appreciate it.
<div class="row justify-content-center">
<div class="col-sm-3">
<div class="card text-white bg-dark mb-3" style="width: 18rem; height:24rem">
<div class="card-header text-muted">
App name
</div>
<div id="demo" class="carousel slide" data-ride="carousel">
<div class="card-body">
<!---------------------CARD BODY--------------------->
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner" style="height:15.2rem">
<div class="carousel-item active">
<img class="card-img-top" src="sample.jpg"
alt="Card image cap"
id="sample">
<h5 class="card-title">Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Hi quick example text to build on the card title and make up
the bulk of the card's content.</p>
</div>
<div class="carousel-item">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text trewrwrwerwerwero build on the card
title and make up
the bulk of the card's content.</p>
</div>
</div>
<!---------------------CARD BODY END--------------------->
</div>
</div>
<div class="card-footer btn btn-primary">
Show me!
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="row justify-content-center">
<div class="col-sm-3">
<div class="card text-white bg-dark mb-3" ">
<div class="card-header text-muted">
App name
</div>
<div class="card-body">
<div id="demo" class="carousel slide" data-ride="carousel">
<!---------------------CARD BODY--------------------->
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner" >
<div class="carousel-item active">
<img class="card-img-top" src="sample.jpg"
alt="Card image cap"
id="sample">
<h5 class="card-title">Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Hi quick example text to build on the card title and make up
the bulk of the card's content.</p>
</div>
<div class="carousel-item">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text trewrwrwerwerwero build on the card
title and make up
the bulk of the card's content.</p>
</div>
<!---------------------CARD BODY END--------------------->
</div>
</div>
<div class="card-footer btn btn-primary">
Show me!
</div>
</div>
</div>
</div>
Related
I created three cards and it works fine, but in mobile view it stacks over this is the result I have imported all jquery and css it works fine
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<section class="bg-light p-4">
<div class="container col-md-12 ">
<h1 class="text-center">services</h1>
<div class="row text-center ">
<div class="col-md-4 col-4 p-2 position-static ">
<div class="card pt-2 bg-info text-white " style="width: 17em;">
<!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
<i class="display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
<div class="card-body">
<h5 class="card-title">Web App Development</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 class="col-md-4 col-4 p-2 position-static ">
<div class="card pt-2 bg-info text-white " style="width: 17em;">
<!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
<i class=" display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
<div class="card-body">
<h5 class="card-title">Web App Development</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 class="col-md-4 col-4 p-2 position-static">
<div class="card pt-2 bg-info text-white" style="width: 17em;">
<!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
<!-- <i class="display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i> -->
<i class=" display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
<div class="card-body">
<h5 class="card-title">Web App Development</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>
</section>
this is at normal view this works fine,
this what I expected
Try to remove inline width styles from cards.
style="width: 17em;"
Demo
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<section class="bg-light p-4">
<div class="container col-md-12 ">
<h1 class="text-center">services</h1>
<div class="row text-center ">
<div class="col-md-4 col-4 p-2 position-static ">
<div class="card pt-2 bg-info text-white ">
<!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
<i class="display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
<div class="card-body">
<h5 class="card-title">Web App Development</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 class="col-md-4 col-4 p-2 position-static ">
<div class="card pt-2 bg-info text-white ">
<!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
<i class=" display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
<div class="card-body">
<h5 class="card-title">Web App Development</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 class="col-md-4 col-4 p-2 position-static">
<div class="card pt-2 bg-info text-white">
<!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
<!-- <i class="display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i> -->
<i class=" display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
<div class="card-body">
<h5 class="card-title">Web App Development</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>
</section>
I am trying to include a 400 x 100 png logo as a Navbar Brand image in Bootstrap 5. However, The logo appears to be a bit too big and even if I reduce the size of the logo, it still overlaps the black container and text input box underneath the Navbar in desktop view. In mobile devices, the logo and associated navbar overlaps even more. Also, the toggle button on the right is not aligned horizontally with the brand image on the left. I would like them to be on the same line. Attaching some screenshots for clarity. Can someone please help?
Desktop View
Mobile View
I would also want the brand image to be more aligned to the left in the mobile view. I am atatching the HTML code for review.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Localhost Site - Classroom Attendance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Testing HTML 5 and Bootstrap 5">
<meta name="keywords" content="html5,bootstrap5">
<meta name="author" content="classroom">
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<!-- Navbar Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="media/fadmeter-logo.png" alt="Classroom Logo" width="250" height="62.5">
</a>
</div>
<!-- Toggler/Collapsible Button -->
<div class="container-fluid">
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Login</a>
</li>
<li>
<form action="#">
<input type="submit" class="btn btn-primary" value="Register">
</form>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Code Input Area -->
<div class="container rounded mt-5 pt-3 pb-1 bg-dark text-white" style="width:400px">
<form action="#">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Enter Code">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Go</button>
</div>
</div>
</form>
</div>
<br>
<!-- Headline and Description -->
<div class="container">
<h3>My Headline Text</h3>
<p><span style="color:blue">Localhost</span> is a test page for HTML 5 and Bootstrap 5.</p>
</div>
<!-- Headline and Description -->
<div class="row mx-5">
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/1.png" style="width: 96px" alt="1">
<div class="card-body">
<h5 class="card-title">Class 1</h5>
<p class="card-text">All students in class room 1.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/2.png" style="width: 96px" alt="2">
<div class="card-body">
<h5 class="card-title">Class 2</h5>
<p class="card-text">All students in class room 2.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/3.png" style="width: 96px" alt="3">
<div class="card-body">
<h5 class="card-title">Class 3</h5>
<p class="card-text">All students in class room 3.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/4.png" style="width: 96px" alt="4">
<div class="card-body">
<h5 class="card-title">Class 4</h5>
<p class="card-text">All students in class room 4.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
Remove the width height from image tag and use "img-fluid" class in image tag.
Or in mobile view you can use position absolute
Thanks for the suggestion provided by #Minhaj. I tweaked my code and it works fine now. I incorrectly placed the brand image in a separate div outside the navbar div. This is my new code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Localhost Site - Classroom Attendance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Testing HTML 5 and Bootstrap 5">
<meta name="keywords" content="html5,bootstrap5">
<meta name="author" content="classroom">
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<!-- Navbar Brand -->
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="media/fadmeter-logo.png" alt="Fadmeter Logo" width="200" height="50" style="position:absolute; top:0; left:0">
</a>
<!-- Toggler/Collapsible Button -->
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Login</a>
</li>
<li>
<form action="#">
<input type="submit" class="btn btn-primary" value="Register">
</form>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Code Input Area -->
<div class="container rounded mt-5 pt-3 pb-1 bg-dark text-white" style="width:400px">
<form action="#">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Enter Code">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Go</button>
</div>
</div>
</form>
</div>
<br>
<!-- Headline and Description -->
<div class="container">
<h3>My Headline Text</h3>
<p><span style="color:blue">Localhost</span> is a test page for HTML 5 and Bootstrap 5.</p>
</div>
<!-- Headline and Description -->
<div class="row mx-5">
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/1.png" style="width: 96px" alt="1">
<div class="card-body">
<h5 class="card-title">Class 1</h5>
<p class="card-text">All students in class room 1.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/2.png" style="width: 96px" alt="2">
<div class="card-body">
<h5 class="card-title">Class 2</h5>
<p class="card-text">All students in class room 2.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-warning">
<img class="card-img-top mx-auto" src="media/3.png" style="width: 96px" alt="3">
<div class="card-body">
<h5 class="card-title">Class 3</h5>
<p class="card-text">All students in class room 3.</p>
</div>
</div>
</div>
<div class="col-sm-3 mt-2">
<div class="card text-center bg-info">
<img class="card-img-top mx-auto" src="media/4.png" style="width: 96px" alt="4">
<div class="card-body">
<h5 class="card-title">Class 4</h5>
<p class="card-text">All students in class room 4.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
I've put together this slider w/bootstrap and some javascript taken/adjusted from other places and it's all looking fine except I want to get rid of the little transition/animation that happens when the caption changes.
It looks like the captions sort of slide in/out but I just want them to immediately appear/disappear. I'm afraid it might be something in the bootstrap javascript but I'm not sure how to fix it.
HTML:
<div class="container">
<div data-ride="carousel" class="carousel slide" data-interval="false" id="carousel-1">
<div class="carousel-inner">
<div class="carousel-item"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
<div class="carousel-item"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
<div class="carousel-item active"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
</div>
<div><span aria-hidden="true" class="carousel-control-prev-icon"></span><span class="sr-only">Previous</span><span aria-hidden="true" class="carousel-control-next-icon"></span><span class="sr-only">Next</span></div>
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2" class="active"></li>
</ol>
</div>
<div id="slider-captions">
<div>
<div id="caption-0" class="pp-carousel-caption">
<p>Paragraph 1</p>
</div>
<div id="caption-1" class="pp-carousel-caption">
<p>Paragraph 2</p>
</div>
<div id="caption-2" class="pp-carousel-caption">
<p>Paragraph 3</p>
</div>
</div>
</div>
javascript:
$("#carousel-1").on('slide.bs.carousel', function(evt) {
var step = $(evt.relatedTarget).index();
$('#slider-captions .pp-carousel-caption:not(#caption-'+step+')').hide( function() {
$('#caption-'+step).show();
});
});
CSS:
.pp-carousel-caption:not(#caption-0) {
display: none;
}
.pp-carousel-caption:not(#caption-0) {
display: none;
}
You can set the duration to 0 with the first parameter, the default value is 400.
$('#slider-captions .pp-carousel-caption:not(#caption-'+step+')').hide(0, function() {
$('#caption-'+step).show(0);
});
https://api.jquery.com/show/#show-duration-complete
https://api.jquery.com/hide/#hide-duration-complete
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 -->
I recently used bootstrap to help me align my projects portfolio on my website. Certainly it did what i was expecting except the time i run the website on my mobile. I used container on every div element to keep it inside the area but the result is totally different.
If i run the mobile phone emulator inside a desktop browser it will display the expected result however, if i run it in real cell phone the result is all messed up.
The link to my website is- www.ijatin.ca and visit the project section inside it and try to run on mobile phone emulator and on real phone you would see 2 different results.
Can anyone tell, why is there such a difference and how can i overcome it?
Thanks so much
I see that you've used Bootstrap 4 and the best formation of usage should be like,
container -> [row -> col-* -> card] [row -> col-* -> card] [row -> col-* -> card] end of container.
But in your code
container -> [row -> col-* -> card] end of container, container -> [row -> col-* -> card] end of container, container -> [row -> col-* -> card] end of container
You don't have to have a container div for each row. Container divs can be placed as a parent where you would want to place your child elements within a bootstrap specific width. So I suggest to change your code like below
<article id="work" style="display: block;" class="active">
<div class="container">
<h2 class="major">Projects</h2>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12"> <!-- change column size according to your need -->
<div class="card project-section">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title project-card-header">Emaily- collecting survey made easy</h3>
<p class="card-text">
Developed a Survey application for smaller businesses who have less resources to create their own. Upon registering on the website, user will be able to send emails to their customers to provide a feedback. The result from the feedback will displayed
on the dashboard.
</p>
<div class="row">
<span class="icon fa-github"> Github</span>
<span class="icon far fa-desktop"> Website</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="card project-section">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title project-card-header">Emaily- collecting survey made easy</h3>
<p class="card-text">
Developed a Survey application for smaller businesses who have less resources to create their own. Upon registering on the website, user will be able to send emails to their customers to provide a feedback. The result from the feedback will displayed
on the dashboard.
</p>
<div class="row">
<span class="icon fa-github"> Github</span>
<span class="icon far fa-desktop"> Website</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="card project-section">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-title project-card-header">Emaily- collecting survey made easy</h3>
<p class="card-text">
Developed a Survey application for smaller businesses who have less resources to create their own. Upon registering on the website, user will be able to send emails to their customers to provide a feedback. The result from the feedback will displayed
on the dashboard.
</p>
<div class="row">
<span class="icon fa-github"> Github</span>
<span class="icon far fa-desktop"> Website</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container offset-lg-1 row">
<div class="card col-md-7 col-sm-12 offset-md-2 offset-lg-2 float-left project-section" style="width: 18rem;">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<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>
<div class="row">
<span class="icon fa-github"> Github</span>
<span class="icon far fa-desktop"> Website</span>
</div>
</div>
</div>
</div>
<div class="container offset-lg-1 row">
<div class="card col-sm-12 col-lg-7 flaot-right project-section" style="width: 18rem;">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<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>
<div class="row">
<span class="icon fa-github"> Github</span>
<span class="icon far fa-desktop"> Website</span>
</div>
</div>
</div>
</div>
<div class="container col-sm-12 offset-lg-1 row">
<div class="card col-md-7 col-sm-12 offset-md-2 offset-lg-2 float-left project-section" style="width: 18rem;">
<img class="card-img-top project-image" src="images/pic02.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card</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>
<div class="row">
<span class="icon fa-github"> Github</span>
<span class="icon far fa-desktop"> Website</span>
</div>
</div>
</div>
</div>
<div class="close">Close</div>
</article>
This would look like
Hope this helps!