Auto Scrolling after collapsing - javascript

there are 6 images in my section, at the first u can see just 3 of them and when u click on read more will opened another 3 image (Collapse), but the question or the problem is, when that button will be opened the screen doesn’t follow the button to down and when i clicked on read less, the screen doesn’t follow the button to top! but the screen stay on a fix position and i have to scroll down/up to see another images
// Read more/less option
$(document).ready(function () {
$('.nav-toggle').click(function () {
var collapse_content_selector = $(this).attr('href');
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function () {
if ($(this).css('display') == 'none') {
toggle_switch.html('Read More');
} else {
toggle_switch.html('Read Less');
}
});
});
});
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<div class="container">
<div class="row">
<h1 class="col-12 text-center pb-5 pt-5">Aktionen</h1>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_7.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_6.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_5.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
</div>
<div class="container">
<div class="row" id="collapse" style="display:none">
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_20.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_12.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_11.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="button" href="#collapse" class="btn btn-secondary nav-toggle">Read More</button></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>


You can use scrollIntoView function
// Read more/less option
$(document).ready(function () {
$('.nav-toggle').click(function () {
var collapse_content_selector = $(this).attr('href');
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function () {
if ($(this).css('display') == 'none') {
toggle_switch.html('Read More');
} else {
toggle_switch.html('Read Less');
}
toggle_switch[0].scrollIntoView(false);
});
});
});
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<div class="container">
<div class="row">
<h1 class="col-12 text-center pb-5 pt-5">Aktionen</h1>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_7.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_6.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_5.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
</div>
<div class="container">
<div class="row" id="collapse" style="display:none">
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_20.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_12.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_11.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="button" href="#collapse" class="btn btn-secondary nav-toggle">Read More</button></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>


Try with adding focus selector to the button onclick

Related

How to put for loop in Bootstrap-Popover in JavaScript?

Before typing this question up I spent a number of days looking for an example that was close enough to help to no avail and so I'm bringing my specific use case to SO
I have three cards of bootstrap 5.
And I want to create Popovers for each card, but maybe the manager wants to make a hundred more. I want to create using a for loop. I don't want to enter every single code. How is this possible?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.rtl.min.css">
<title>Document</title>
</head>
<body>
<div style="height:200px"></div>
<div class="container">
<div class="row">
<div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="">
<div class="card position-relative">
<div class="d-block card-icon">
<img src="https://www.virtuozzo.com/company/blog/wp-content/uploads/2019/04/laravel-framework.png" class="card-img" alt="Title">
</div>
<div class="card-body">
<a href="#" class=" text-decoration-none text-dark ">
<h5 class="card-title ">Title 1</h5>
</a>
<p>A short description</p>
More Details
</div>
</div>
</div>
<div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="">
<div class="card position-relative">
<div class="d-block card-icon">
<img src="https://www.virtuozzo.com/company/blog/wp-content/uploads/2019/04/laravel-framework.png" class="card-img" alt="Title">
</div>
<div class="card-body">
<a href="#" class=" text-decoration-none text-dark ">
<h5 class="card-title ">Title 2</h5>
</a>
<p>A short description</p>
More Details
</div>
</div>
</div>
<div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="">
<div class="card position-relative">
<div class="d-block card-icon">
<img src="https://www.virtuozzo.com/company/blog/wp-content/uploads/2019/04/laravel-framework.png" class="card-img" alt="Title">
</div>
<div class="card-body">
<a href="#" class=" text-decoration-none text-dark ">
<h5 class="card-title ">Title 3</h5>
</a>
<p>A short description</p>
More Details
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script>
const servicePOP = document.querySelector('.servicePOP')
const popover = new bootstrap.Popover(servicePOP, {
sanitize: false,
html: true,
content: '<button type="button" class="btn btn-primary">My Button</button>'
});
</script>
</body>
</html>
I want to create using for a loop.

I think you need to use javascript string for html content.
Please try with this.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.rtl.min.css">
<title>Document</title>
</head>
<body>
<div style="height:200px"></div>
<div class="container">
<div class="row" id ="row">
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script>
for(var i = 0; i<100; i++){
let code = "";
code += '<div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="" alt="'+i+'">\n';
code += '\t\t\t<div class="card position-relative">\n';
code += '\t\t\t\t<div class="d-block card-icon">\n';
code += '\t\t\t\t\t<img src="https://www.virtuozzo.com/company/blog/wp-content/uploads/2019/04/laravel-framework.png" class="card-img" alt="Title">\n';
code += '\t\t\t\t</div>\n';
code += '\t\t\t\t<div class="card-body">\n';
code += '\t\t\t\t\t<a href="#" class=" text-decoration-none text-dark ">\n';
code += '\t\t\t\t\t\t<h5 class="card-title ">Title 1</h5>\n';
code += '\t\t\t\t\t</a>\n';
code += '\t\t\t\t\t<p>A short description</p>\n';
code += '\t\t\t\t\tMore Details\n';
code += '\t\t\t\t</div>\n';
code += '\t\t\t</div>\n';
code += '\t\t</div>\n';
document.getElementById("row").innerHTML += code;
}
</script>
</body>
</html>

Show div's background-color dynamically using getComputedStyle

I am creating a visual style sheet for a website that uses an extensive list of variables to define colors. For each of the colors, I have created a div with a class containing the variable name.
Is there a way to walk each of the divs on the page and add the background-color definition below the variable name in each of the divs?
I found the script below, but I am not sure how to get it to walk the page and add the color definition to each div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Oral Health Color Pallet</title>
</head>
<body onload="myFunction()">
<div class="container py-5 text-center">
<h1>Background Colors</h1>
<div class="row row-cols-2 text-white">
<div id="test" class="col bg-secondary p-5">
<h2>bg-secondary</h2>
<span id="demo"></span>
</div>
<div class="col bg-primary p-5">
<h2>bg-primary</h2>
</div>
<div class="col bg-success p-5">
<h2>bg-success</h2>
</div>
<div class="col bg-info p-5">
<h2>bg-info</h2>
</div>
<div class="col bg-warning p-5">
<h2>bg-warning</h2>
</div>
<div class="col bg-danger p-5">
<h2>bg-danger</h2>
</div>
</div>
</div>
<div class="container py-5 text-center">
<h1>Gradients</h1>
<div class="row row-cols-2">
<div class="row row-cols-2 text-white">
<div class="col bg-gradient-secondary p-5">
<h2>bg-secondary</h2>
</div>
<div class="col bg-gradient-primary p-5">
<h2>bg-primary</h2>
</div>
<div class="col bg-gradient-success p-5">
<h2>bg-success</h2>
</div>
<div class="col bg-gradient-info p-5">
<h2>bg-info</h2>
</div>
<div class="col bg-gradient-warning p-5">
<h2>bg-warning</h2>
</div>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
var elem = document.getElementById("test");
var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>

You can try like in the following snippet:
function myFunction() {
let elems = document.querySelectorAll(".col");
elems.forEach(elem => {
let theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
let gradient = window.getComputedStyle(elem, null).getPropertyValue("background-image");
let title = elem.querySelector("h2")
let hex = rgb2hex(theCSSprop)
title.insertAdjacentHTML('afterend', `<span>${hex}</span><br/><span>${gradient}</span>`);
})
}
let rgb2hex = c => '#' + c.match(/\d+/g).map(x => (+x).toString(16).padStart(2, 0)).join``
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Oral Health Color Pallet</title>
<style>
.bg-gradient-blue-radial {
background-image: radial-gradient(at 91% 100%, #00a1e4 1%, #1f4282 100%);
color: #fff;
}
</style>
</head>
<body onload="myFunction()">
<div class="container py-5 text-center">
<h1>Background Colors</h1>
<div class="row row-cols-2 text-white">
<div id="test" class="col bg-secondary p-5">
<h2>bg-secondary</h2>
<span id="demo"></span>
</div>
<div class="col bg-primary p-5">
<h2>bg-primary</h2>
</div>
<div class="col bg-success p-5">
<h2>bg-success</h2>
</div>
<div class="col bg-info p-5">
<h2>bg-info</h2>
</div>
<div class="col bg-warning p-5">
<h2>bg-warning</h2>
</div>
<div class="col bg-danger p-5">
<h2>bg-danger</h2>
</div>
</div>
</div>
<div class="container py-5 text-center">
<h1>Gradients</h1>
<div class="row">
<div class="row row-cols-2 text-white">
<div class="col bg-gradient-blue-radial p-5">
<h2>bg-blue-radial</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>

I started to learn javascript. How can I add another scroll function?

This is HTML-code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<header>
<div id="menu" class="row no-gutter menu">
<div class="col-md-3 offset-md-1">
<img src="img/logo.png">
</div>
<div class="col-md-8">
<nav class="d-flex flex-row-reverse">
<ul class="p-2">
<li>
Improves
</li>
<li>
Projects
</li>
<li>
<a id="about" href="">About</a>
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
</div>
<div class="row no-gutter">
<div class="hellopage">
<div class="col-md-10 offset-md-1 hello">
<font>
Hello.
</font>
<br>
<div class="mynameis">
My name is
<div class="name">
DENIS,
</div>
</div>
<div class="whoami">
I am a web-desihner, and front-end developer, and a person, who interested in IT.
</div>
<div class="quality">
Quality is a main parametr for me.
</div>
<div class="classcol-md-5 offset-md-4">
<button class="bnative1" id="button">
FOLLOW ME
</button>
</div>
</div>
</div>
</div>
</header>
<!-- Второй блок -->
<div class="container-fluid">
<div id="sb" class="row no-gutter sb">
<div class="col-md-6 offset-md-3 text-center whatcani">
What can I offer for you?
</div>
<div class="col-md-3 offset-md-1 pic1 ">
<img src="img/adopt.png">
<div class="txt1">
<div class="top1">Adaptive Web-Design</div>
<div>I always use adaptive</div>
<div>design.Usually,web-site</div>
<div>is an advertisment</div>
<div>for big set of companies.</div>
<div>It have to be focused on</div>
<div>client and must be</div>
<div>correctly displayed in all</div>
<div>devices</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic2">
<img src="img/hands.png">
<div class="txt2">
<div class="top2">Indivigual aproach</div>
<div>I always interact with</div>
<div>the customer and ready</div>
<div>to give some advice,</div>
<div>based on my experience</div>
<div>to make web-site better</div>
<div>and user-friendly</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic3">
<img src="img/calendar.png">
<div class="txt3">
<div class="top3">Completion on time</div>
<div>The project will be</div>
<div>compleated on time,</div>
<div>and a work plan will be</div>
<div>provided for the</div>
<div>customer</div>
</div>
</div>
<div class="col-md-8 offset-md-2 line">
<hr>
</div>
</div>
</div>
<!-- Третий блок -->
<div id="me" class="row no-gutter tb">
<div class="col-md-3 offset-md-4 text-center aboutme">
About me
</div>
<div class="col-md-10 offset-md-1 txtab">
<div>I started my career as a system administrator(2016). At work I</div>
<div>recieved a lot of skills, that helps me to deal every issue. Because</div>
<div>there are exist an issues, that you can't solve by using internet. For</div>
<div>example I worked with special software for MRI.</div>
</div>
<div class="col-md-4 offset-md-1 whiteone">
<img src="img/white.png">
</div>
<div class="col-md-6 nowi">
Now I am <span class="wd">WEB DESIGNER</span>
</div>
<div class="col-md-9 offset-md-1 person">
And a person, who ready to make <span class="cool">COOL</span> web-site for you.
</div>
<div class="col-md-4 offset-md-7 d-flex flex-row-reverse">
<img class="whitetwo" src="img/white.png">
</div>
</div>
<!-- Четвертый блок -->
<div class="row no-gutter fob">
<div class="col-md-5 offset-md-3 text-center inmy">
In my projects I use
</div>
<div class="col-md-4 offset-md-1 desone">
<img src="img/gapps.png">
<div class="tech1">
<div>I use graphical applications to</div>
<div>make a template for your website.</div>
<div>This is the first step. Here we can</div>
<div>coose a colors, that will be used</div>
<div>in web-site</div>
</div>
</div>
<div class="col-md-6 destwo">
<img src="img/site.png">
<div class="tech1">
<div>To make web-page, I use HTML,CSS, JS, Less. Here I</div>
<div>can make animation, that can make your website</div>
<div>alive.</div>
</div>
</div>
<div class="col-md-10 offset-md-1 technologies">
<div>I always <span class="devmy">DEVELOPE</span> myself, learn new technologies and</div>
</div>
<div class="col-md-4 offset-md-7 inmy"><span class="use">USE</span> it in my projects</div>
</div>
<!-- Футер -->
<div class="row no-gutter foot">
<div class="col-md-4 offset-md-1 social">
<img src="img/email.png">
den_lupanov#mail.ru
<div class="fb">
<img src="img/facebook.png">
https://www.facebook.com/den.necris
</div>
</div>
<div class="col-md-1 offset-md-5 gototop">
<img id="up" src="img/up.png">
</div>
</div>
</div>
</div>
</body>
</html>
'''
I have a code:
window.onload = function(){
// Изменение цвета при наведении на кнопку
var button = document.getElementById("button");
button.addEventListener("mouseenter", function(){
button.classList.remove("bnative1");
button.classList.add("buttonclass1");
});
button.addEventListener("mouseleave", function(){
button.classList.remove("buttonclass1");
button.classList.add("bnative1");
})
// Scroll to the first element(Works ok)
document.getElementById("button").addEventListener("click", scrollToElement);
function scrollToElement(e){
element = document.getElementById("sb");
element.scrollIntoView({behavior: 'smooth', block: "start",});
}
//Scroll to another element(ERROR)
document.getElementById("up").addEventListener("click", scrollToTop);
function scrollToTop(e){
top = document.getElementById("menu");
top.scrollIntoView({behavior: 'smooth', block: "start"});
}
}
'''
Finally, when I click on the second element for scrolling, in debugger I recieve an error:"Uncaught TypeError: top.scrollIntoView is not a function
at HTMLImageElement.scrollToTop (script.js:22)". It should works properly, but I don't understand why it doen not working

you just needed to define "top". add var and your code works!
window.onload = function(){
}
// Изменение цвета при наведении на кнопку
var button = document.getElementById("button");
button.addEventListener("mouseenter", function(){
button.classList.remove("bnative1");
button.classList.add("buttonclass1");
});
button.addEventListener("mouseleave", function(){
button.classList.remove("buttonclass1");
button.classList.add("bnative1");
})
// Scroll to the first element(Works ok)
document.getElementById("button").addEventListener("click", scrollToElement);
function scrollToElement(e){
element = document.getElementById("sb");
element.scrollIntoView({behavior: 'smooth', block: "start",});
}
//Scroll to another element(ERROR)
document.getElementById("up").addEventListener("click", scrollToTop);
function scrollToTop(e){
var top = document.getElementById("menu");
top.scrollIntoView({behavior: 'smooth', block: "start"});
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<header>
<div id="menu" class="row no-gutter menu">
<div class="col-md-3 offset-md-1">
<img src="img/logo.png">
</div>
<div class="col-md-8">
<nav class="d-flex flex-row-reverse">
<ul class="p-2">
<li>
Improves
</li>
<li>
Projects
</li>
<li>
<a id="about" href="">About</a>
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
</div>
<div class="row no-gutter">
<div class="hellopage">
<div class="col-md-10 offset-md-1 hello">
<font>
Hello.
</font>
<br>
<div class="mynameis">
My name is
<div class="name">
DENIS,
</div>
</div>
<div class="whoami">
I am a web-desihner, and front-end developer, and a person, who interested in IT.
</div>
<div class="quality">
Quality is a main parametr for me.
</div>
<div class="classcol-md-5 offset-md-4">
<button class="bnative1" id="button">
FOLLOW ME
</button>
</div>
</div>
</div>
</div>
</header>
<!-- Второй блок -->
<div class="container-fluid">
<div id="sb" class="row no-gutter sb">
<div class="col-md-6 offset-md-3 text-center whatcani">
What can I offer for you?
</div>
<div class="col-md-3 offset-md-1 pic1 ">
<img src="img/adopt.png">
<div class="txt1">
<div class="top1">Adaptive Web-Design</div>
<div>I always use adaptive</div>
<div>design.Usually,web-site</div>
<div>is an advertisment</div>
<div>for big set of companies.</div>
<div>It have to be focused on</div>
<div>client and must be</div>
<div>correctly displayed in all</div>
<div>devices</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic2">
<img src="img/hands.png">
<div class="txt2">
<div class="top2">Indivigual aproach</div>
<div>I always interact with</div>
<div>the customer and ready</div>
<div>to give some advice,</div>
<div>based on my experience</div>
<div>to make web-site better</div>
<div>and user-friendly</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic3">
<img src="img/calendar.png">
<div class="txt3">
<div class="top3">Completion on time</div>
<div>The project will be</div>
<div>compleated on time,</div>
<div>and a work plan will be</div>
<div>provided for the</div>
<div>customer</div>
</div>
</div>
<div class="col-md-8 offset-md-2 line">
<hr>
</div>
</div>
</div>
<!-- Третий блок -->
<div id="me" class="row no-gutter tb">
<div class="col-md-3 offset-md-4 text-center aboutme">
About me
</div>
<div class="col-md-10 offset-md-1 txtab">
<div>I started my career as a system administrator(2016). At work I</div>
<div>recieved a lot of skills, that helps me to deal every issue. Because</div>
<div>there are exist an issues, that you can't solve by using internet. For</div>
<div>example I worked with special software for MRI.</div>
</div>
<div class="col-md-4 offset-md-1 whiteone">
<img src="img/white.png">
</div>
<div class="col-md-6 nowi">
Now I am <span class="wd">WEB DESIGNER</span>
</div>
<div class="col-md-9 offset-md-1 person">
And a person, who ready to make <span class="cool">COOL</span> web-site for you.
</div>
<div class="col-md-4 offset-md-7 d-flex flex-row-reverse">
<img class="whitetwo" src="img/white.png">
</div>
</div>
<!-- Четвертый блок -->
<div class="row no-gutter fob">
<div class="col-md-5 offset-md-3 text-center inmy">
In my projects I use
</div>
<div class="col-md-4 offset-md-1 desone">
<img src="img/gapps.png">
<div class="tech1">
<div>I use graphical applications to</div>
<div>make a template for your website.</div>
<div>This is the first step. Here we can</div>
<div>coose a colors, that will be used</div>
<div>in web-site</div>
</div>
</div>
<div class="col-md-6 destwo">
<img src="img/site.png">
<div class="tech1">
<div>To make web-page, I use HTML,CSS, JS, Less. Here I</div>
<div>can make animation, that can make your website</div>
<div>alive.</div>
</div>
</div>
<div class="col-md-10 offset-md-1 technologies">
<div>I always <span class="devmy">DEVELOPE</span> myself, learn new technologies and</div>
</div>
<div class="col-md-4 offset-md-7 inmy"><span class="use">USE</span> it in my projects</div>
</div>
<!-- Футер -->
<div class="row no-gutter foot">
<div class="col-md-4 offset-md-1 social">
<img src="img/email.png">
den_lupanov#mail.ru
<div class="fb">
<img src="img/facebook.png">
https://www.facebook.com/den.necris
</div>
</div>
<div class="col-md-1 offset-md-5 gototop">
<img id="up" src="img/up.png">
</div>
</div>
</div>

Other than using it like that it might be better to make it one function and use it in the HTML.
The following code should work like a charm:
function scrollSmoothTo(elementId) {
var element = document.getElementById(elementId);
element.scrollIntoView({ block: 'start', behavior: 'smooth' });
}
And, in HTML use it like that:
<a class="btn-outline-light" onclick="scrollSmoothTo('work')">See our work</a>

How can I filter the card bootstrap HTMLDivElement properly?

I am creating a filtering function. With this function we want to filter the application cards, but I cannot display the element properly. The function does not show part of the filtered card, button, picture or text. I know that by placing "#myDIV *" in the .filter function it will search all the elements, even knowing this, I have not found the right way to do it.
Can anybody help me?
I have tried with the code below:
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myDIV *").filter(function () {
if ($(this).text().toLowerCase() != "abrir") {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
}
});
});
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
<title>SGR - Desktop</title>
<!-- Custom CSS -->
<!-- Custom CSS -->
<link href="/assets/css/font-awesome.css" rel="stylesheet" />
<link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
<link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
<link href="/dist/css/style.min.css" rel="stylesheet">
<link href="/dist/css/core.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<div id="main-wrapper">
<div class="page-wrapper">
<div class="page-breadcrumb">
<div class="row">
<div class="col-12 d-flex no-block align-items-center">
<div class="header-title">
<h1>
Home
<small>
<i class="fa fa-angle-right"></i>
Desktop
</small>
</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
<input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
<br />
<br />
<div class="container">
<div id="myDIV" class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="emulador project64">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">emulador project64</h5>
<p class="card-text">project64.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="overwatch">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">overwatch</h5>
<p class="card-text">overwatch.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="YouTube">
<img class="card-img-top" src="../../assets/images/YouTube.png">
<div class="card-body">
<h5 class="card-title">YouTube</h5>
<p class="card-text">Google Inc.</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Canal de Denuncias">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Canal de Denuncias</h5>
<p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Cipher">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Cipher</h5>
<p class="card-text">www.cipher.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Terraria">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Terraria</h5>
<p class="card-text">shared/terraria.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Revista Andén">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Revista Andén</h5>
<p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Smov2">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Smov2</h5>
<p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Concursos internos">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Concursos internos</h5>
<p class="card-text">https://metro.openagora.cl/</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="The Clinic">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">The Clinic</h5>
<p class="card-text">www.theclinic.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Hotmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Hotmail</h5>
<p class="card-text">http://www.hotmail.com</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Gmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Gmail</h5>
<p class="card-text">http://www.gmail.com</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="CNN">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">CNN</h5>
<p class="card-text">www.cnn.org</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Metro Familia">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Metro Familia</h5>
<p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="League of Legends">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">League of Legends</h5>
<p class="card-text">lollauncher.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Minecraft Java Edition">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Minecraft Java Edition</h5>
<p class="card-text">minecraft.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Webmail Metro">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Webmail Metro</h5>
<p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Autoconsulta ESS">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Autoconsulta ESS</h5>
<p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Andén Social">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Andén Social</h5>
<p class="card-text">http://andensocial.metro.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Sitio Conductores">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Sitio Conductores</h5>
<p class="card-text">http://operaciones.metrosantiago.cl/</p>
Abrir
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer text-center">
<div class="modal" id="loginModal"><div class="modal-dialog modal-lg"><div class="modal-content"> <div id="login"></div>
</div></div></div>
</footer>
</div>
</div>
<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="/assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<script src="/dist/js/waves.js"></script>
<!--Menu sidebar -->
<script src="/dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="/dist/js/custom.min.js"></script>
<script src="/dist/js/core.js"></script>
<script src="/assets/libs/toastr/build/toastr.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.min.js"></script>
<script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/assets/libs/bootbox/bootbox.js"></script>
<!--This page JavaScript -->
<!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
<!-- Charts js Files -->
<!--Success Modal Templates-->
<div class="modal fade modal-message modal-success" id="modal-success"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="far fa-check-circle"></i>
</div><div class="modal-title"> Correcto
</div><div class="modal-body"> La solicitud se efectuó con éxito
</div><div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div></div></div></div>
<!--End Success Modal Templates-->
<!--Info Modal Templates-->
<div class="modal fade modal-message modal-info" id="modal-info"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="fa fa-envelope"></i>
</div><div class="modal-title"> Información
</div><div class="modal-body"> Se le notifica información importante
</div><div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Info Modal Templates-->
<!--Danger Modal Templates-->
<div class="modal fade modal-message modal-danger" id="modal-danger"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="glyphicon glyphicon-fire"></i>
</div><div class="modal-title"> Error
</div><div class="modal-body"> Se ha producido un error
</div><div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Danger Modal Templates-->
<!--Warning Modal Templates-->
<div class="modal fade modal-message modal-warning" id="modal-warning"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="fa fa-warning"></i>
</div><div class="modal-title"> Alerta
</div><div class="modal-body"> Algo ha salido mal
</div><div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Warning Modal Templates-->
<!--Confirm Modal Templates-->
<div id="core_modalconfirmdialog" style="display:none;">
<div class="row">
<div class="col-md-12">
<div class="modal-header">
<i class="fa fa-warning"></i>
</div>
<div class="modal-body">
Mensaje
</div>
<div class="modal-body">
Mensaje que iría en el centro
</div>
</div>
</div>
</div>
<!--Confirm Modal Templates-->
</body>
</html>

You can first hide all cards while typing and only show the ones based on the search query. To simplify your filter a bit you could use includes as well.
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("div[class^=col]")
.hide()
.filter(function() {
var cardTitle = $(this).find('.card-title').text().toLowerCase();
return cardTitle.includes(value);
})
.show();
});
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
<title>SGR - Desktop</title>
<!-- Custom CSS -->
<!-- Custom CSS -->
<link href="/assets/css/font-awesome.css" rel="stylesheet" />
<link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
<link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
<link href="/dist/css/style.min.css" rel="stylesheet">
<link href="/dist/css/core.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<div id="main-wrapper">
<div class="page-wrapper">
<div class="page-breadcrumb">
<div class="row">
<div class="col-12 d-flex no-block align-items-center">
<div class="header-title">
<h1>
Home
<small>
<i class="fa fa-angle-right"></i>
Desktop
</small>
</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
<input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
<br />
<br />
<div class="container">
<div id="myDIV" class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="emulador project64">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">emulador project64</h5>
<p class="card-text">project64.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="overwatch">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">overwatch</h5>
<p class="card-text">overwatch.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="YouTube">
<img class="card-img-top" src="../../assets/images/YouTube.png">
<div class="card-body">
<h5 class="card-title">YouTube</h5>
<p class="card-text">Google Inc.</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Canal de Denuncias">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Canal de Denuncias</h5>
<p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Cipher">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Cipher</h5>
<p class="card-text">www.cipher.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Terraria">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Terraria</h5>
<p class="card-text">shared/terraria.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Revista Andén">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Revista Andén</h5>
<p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Smov2">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Smov2</h5>
<p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Concursos internos">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Concursos internos</h5>
<p class="card-text">https://metro.openagora.cl/</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="The Clinic">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">The Clinic</h5>
<p class="card-text">www.theclinic.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Hotmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Hotmail</h5>
<p class="card-text">http://www.hotmail.com</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Gmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Gmail</h5>
<p class="card-text">http://www.gmail.com</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="CNN">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">CNN</h5>
<p class="card-text">www.cnn.org</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Metro Familia">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Metro Familia</h5>
<p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="League of Legends">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">League of Legends</h5>
<p class="card-text">lollauncher.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Minecraft Java Edition">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Minecraft Java Edition</h5>
<p class="card-text">minecraft.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Webmail Metro">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Webmail Metro</h5>
<p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Autoconsulta ESS">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Autoconsulta ESS</h5>
<p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Andén Social">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Andén Social</h5>
<p class="card-text">http://andensocial.metro.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Sitio Conductores">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Sitio Conductores</h5>
<p class="card-text">http://operaciones.metrosantiago.cl/</p>
Abrir
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer text-center">
<div class="modal" id="loginModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="login"></div>
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="/assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<script src="/dist/js/waves.js"></script>
<!--Menu sidebar -->
<script src="/dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="/dist/js/custom.min.js"></script>
<script src="/dist/js/core.js"></script>
<script src="/assets/libs/toastr/build/toastr.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.min.js"></script>
<script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/assets/libs/bootbox/bootbox.js"></script>
<!--This page JavaScript -->
<!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
<!-- Charts js Files -->
<!--Success Modal Templates-->
<div class="modal fade modal-message modal-success" id="modal-success">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <i class="far fa-check-circle"></i>
</div>
<div class="modal-title"> Correcto
</div>
<div class="modal-body"> La solicitud se efectuó con éxito
</div>
<div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div>
</div>
</div>
</div>
<!--End Success Modal Templates-->
<!--Info Modal Templates-->
<div class="modal fade modal-message modal-info" id="modal-info">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <i class="fa fa-envelope"></i>
</div>
<div class="modal-title"> Información
</div>
<div class="modal-body"> Se le notifica información importante
</div>
<div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div>
</div>
</div>
</div>
<!--End Info Modal Templates-->
<!--Danger Modal Templates-->
<div class="modal fade modal-message modal-danger" id="modal-danger">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <i class="glyphicon glyphicon-fire"></i>
</div>
<div class="modal-title"> Error
</div>
<div class="modal-body"> Se ha producido un error
</div>
<div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div>
</div>
</div>
</div>
<!--End Danger Modal Templates-->
<!--Warning Modal Templates-->
<div class="modal fade modal-message modal-warning" id="modal-warning">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <i class="fa fa-warning"></i>
</div>
<div class="modal-title"> Alerta
</div>
<div class="modal-body"> Algo ha salido mal
</div>
<div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div>
</div>
</div>
</div>
<!--End Warning Modal Templates-->
<!--Confirm Modal Templates-->
<div id="core_modalconfirmdialog" style="display:none;">
<div class="row">
<div class="col-md-12">
<div class="modal-header">
<i class="fa fa-warning"></i>
</div>
<div class="modal-body">
Mensaje
</div>
<div class="modal-body">
Mensaje que iría en el centro
</div>
</div>
</div>
</div>
<!--Confirm Modal Templates-->
</body>
</html>

$('#box').keyup(function(){
var valThis = $(this).val().toLowerCase();
if(valThis === ""){
$('.library_card > div').show();
} else {
$('.library_card > div').each(function(){
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
});
};
});
// #box-- inpuut type text id
// .library_card -- div class

I found this way to solve the problem and prevent the cards from being displayed incorrectly:
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$(".card").filter(function () {
$(this.parentNode).toggle($(this).find('.card-title').text().toLowerCase().indexOf(value) > -1)
});
});
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.card {
min-height: 250px;
}
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
<title>SGR - Desktop</title>
<!-- Custom CSS -->
<!-- Custom CSS -->
<link href="/assets/css/font-awesome.css" rel="stylesheet" />
<link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
<link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
<link href="/dist/css/style.min.css" rel="stylesheet">
<link href="/dist/css/core.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<div id="main-wrapper">
<div class="page-wrapper">
<div class="page-breadcrumb">
<div class="row">
<div class="col-12 d-flex no-block align-items-center">
<div class="header-title">
<h1>
Home
<small>
<i class="fa fa-angle-right"></i>
Desktop
</small>
</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
<input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
<br />
<br />
<div class="container">
<div id="myDIV" class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="emulador project64">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">emulador project64</h5>
<p class="card-text">project64.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="overwatch">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">overwatch</h5>
<p class="card-text">overwatch.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="YouTube">
<img class="card-img-top" src="../../assets/images/YouTube.png">
<div class="card-body">
<h5 class="card-title">YouTube</h5>
<p class="card-text">Google Inc.</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Canal de Denuncias">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Canal de Denuncias</h5>
<p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Cipher">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Cipher</h5>
<p class="card-text">www.cipher.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Terraria">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Terraria</h5>
<p class="card-text">shared/terraria.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Revista Andén">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Revista Andén</h5>
<p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Smov2">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Smov2</h5>
<p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Concursos internos">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Concursos internos</h5>
<p class="card-text">https://metro.openagora.cl/</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="The Clinic">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">The Clinic</h5>
<p class="card-text">www.theclinic.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Hotmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Hotmail</h5>
<p class="card-text">http://www.hotmail.com</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Gmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Gmail</h5>
<p class="card-text">http://www.gmail.com</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="CNN">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">CNN</h5>
<p class="card-text">www.cnn.org</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Metro Familia">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Metro Familia</h5>
<p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="League of Legends">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">League of Legends</h5>
<p class="card-text">lollauncher.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Minecraft Java Edition">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Minecraft Java Edition</h5>
<p class="card-text">minecraft.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Webmail Metro">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Webmail Metro</h5>
<p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Autoconsulta ESS">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Autoconsulta ESS</h5>
<p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Andén Social">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Andén Social</h5>
<p class="card-text">http://andensocial.metro.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Sitio Conductores">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Sitio Conductores</h5>
<p class="card-text">http://operaciones.metrosantiago.cl/</p>
Abrir
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer text-center">
<div class="modal" id="loginModal"><div class="modal-dialog modal-lg"><div class="modal-content"> <div id="login"></div>
</div></div></div>
</footer>
</div>
</div>
<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="/assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<script src="/dist/js/waves.js"></script>
<!--Menu sidebar -->
<script src="/dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="/dist/js/custom.min.js"></script>
<script src="/dist/js/core.js"></script>
<script src="/assets/libs/toastr/build/toastr.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.min.js"></script>
<script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/assets/libs/bootbox/bootbox.js"></script>
<!--This page JavaScript -->
<!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
<!-- Charts js Files -->
<!--Success Modal Templates-->
<div class="modal fade modal-message modal-success" id="modal-success"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="far fa-check-circle"></i>
</div><div class="modal-title"> Correcto
</div><div class="modal-body"> La solicitud se efectuó con éxito
</div><div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div></div></div></div>
<!--End Success Modal Templates-->
<!--Info Modal Templates-->
<div class="modal fade modal-message modal-info" id="modal-info"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="fa fa-envelope"></i>
</div><div class="modal-title"> Información
</div><div class="modal-body"> Se le notifica información importante
</div><div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Info Modal Templates-->
<!--Danger Modal Templates-->
<div class="modal fade modal-message modal-danger" id="modal-danger"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="glyphicon glyphicon-fire"></i>
</div><div class="modal-title"> Error
</div><div class="modal-body"> Se ha producido un error
</div><div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Danger Modal Templates-->
<!--Warning Modal Templates-->
<div class="modal fade modal-message modal-warning" id="modal-warning"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="fa fa-warning"></i>
</div><div class="modal-title"> Alerta
</div><div class="modal-body"> Algo ha salido mal
</div><div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Warning Modal Templates-->
<!--Confirm Modal Templates-->
<div id="core_modalconfirmdialog" style="display:none;">
<div class="row">
<div class="col-md-12">
<div class="modal-header">
<i class="fa fa-warning"></i>
</div>
<div class="modal-body">
Mensaje
</div>
<div class="modal-body">
Mensaje que iría en el centro
</div>
</div>
</div>
</div>
<!--Confirm Modal Templates-->
</body>
</html>

Width changing when switching from static positioning, to fixed positioning

When scrolling, I change my card from position:static;, to position:fixed;. When it changes to position:fixed;, the width gets insanely large rather than staying the same.
I've tried a variety of solutions, including all listed on a near duplicate post here: Is it possible to keep the width of the parent element when position: fixed is applied?
Just wondering if I'm being silly here. Any help would be greatly appreciated.
var elementPosition = $('#navigation').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$('#navigation').css('position', 'fixed').css('top', '0');
} else {
$('#navigation').css('position', 'static');
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container-fluid mt-4">
<div class="row">
<div class="col-3">
<div class="card" id="navigation">
<div class="card-body">
<h3>txgrgrgr</h3>
<p>Hello and welcome to the online booking page forthghfg.</p>
<hr>
<h4 class="mt-4">Contact</h4>
<p>thghshg.co.uk</p>
<p>0123464</p>
<hr>
<h4 class="mt-4">Address</h4>
<p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
<hr>
<h4 class="mt-4">Opening Times</h4>
<p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
</div>
</div>
</div>
<div class="col-9" style="margin-bottom:1000px;">
<div class="card">
<div class="card-body text-center">
<h2 class="mb-4 pb-4 pt-4">Schedule with a team member</h2>
<div class="row">
<div class="col-3 mb-3">
<div class="card h-100">
<img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
<div class="card-body">
<p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
<a class="btn btn-success btn-block">Schedule Appointment</a>
</div>
</div>
</div>
<div class="col-3 mb-3">
<div class="card h-100">
<img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
<div class="card-body">
<p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
<a class="btn btn-success btn-block">Schedule Appointment</a>
</div>
</div>
</div>

I have added position:sticky in both case. when its scroll or not. Pleas check below snippet its working fine.
var elementPosition = $('#navigation').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$('#navigation').css('position', 'sticky').css('top', '0');
} else {
$('#navigation').css('position', 'sticky');
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container-fluid mt-4">
<div class="row">
<div class="col-3">
<div class="card" id="navigation">
<div class="card-body">
<h3>txgrgrgr</h3>
<p>Hello and welcome to the online booking page forthghfg.</p>
<hr>
<h4 class="mt-4">Contact</h4>
<p>thghshg.co.uk</p>
<p>0123464</p>
<hr>
<h4 class="mt-4">Address</h4>
<p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
<hr>
<h4 class="mt-4">Opening Times</h4>
<p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
</div>
</div>
</div>
<div class="col-9" style="margin-bottom:1000px;">
<div class="card">
<div class="card-body text-center">
<h2 class="mb-4 pb-4 pt-4">Schedule with a team member</h2>
<div class="row">
<div class="col-3 mb-3">
<div class="card h-100">
<img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
<div class="card-body">
<p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
<a class="btn btn-success btn-block">Schedule Appointment</a>
</div>
</div>
</div>
<div class="col-3 mb-3">
<div class="card h-100">
<img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
<div class="card-body">
<p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
<a class="btn btn-success btn-block">Schedule Appointment</a>
</div>
</div>
</div>

Categories

Resources