carousel effect don't work when click on controls - html

I have a problem with effect scrolling in carousel. Just animation, simple scroll work, but animation don't.
Maybe someone can check my code and repair ^_^ thanks.
image add in css with class carousel-image-1(2,3). I compare example on official bootstrap site and all like in my code. Maybe i don't see where error
.carousel-item {
height: 450px;
}
.carousel-image-1 {
background: url(https://source.unsplash.com/random/560x560);
background-size: cover;
}
.carousel-image-2 {
background: url(https://source.unsplash.com/random/560x560);
background-size: cover;
}
.carousel-image-3 {
background: url(https://source.unsplash.com/random/560x560);
background-size: cover;
}
<!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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="/css/style.css">
<title>Title</title>
</head>
<body>
<!-- Showcase Slider-->
<section class="showcase">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item carousel-image-1 active">
<div class="container">
<div class="carousel-caption d-none d-sm-block text-right mb-5">
<h1 class="display-3">
Heading One
</h1>
<p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus nostrum excepturi
repellendus quos provident sit! Odio odit quo voluptatum aperiam.</p>
Sign Up Now
</div>
</div>
</div>
<div class="carousel-item carousel-image-2 ">
<div class="container">
<div class="carousel-caption d-none d-sm-block mb-5">
<h1 class="display-3">
Heading Two
</h1>
<p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus nostrum excepturi
repellendus quos provident sit! Odio odit quo voluptatum aperiam.</p>
Learn More
</div>
</div>
</div>
<div class="carousel-item carousel-image-3 ">
<div class="container">
<div class="carousel-caption d-none d-sm-block text-right mb-5">
<h1 class="display-3">
Heading Three
</h1>
<p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus nostrum excepturi
repellendus quos provident sit! Odio odit quo voluptatum aperiam.</p>
Learn More
</div>
</div>
</div>
</div>
<a href="#myCarousel" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#myCarousel" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
</html>


You just need to specify a height for your slider - as it has defaulted to 0 pixels high. :-)
As you can see below, I have just added in a min-height of 400px (you can set it to whatever you like) and I've also just set a random background so you can see your white text (as it wasn't showing up in your example but the slider was actually working behind the scenes.
.carousel-item {
min-height: 400px;
background-image: url('https://picsum.photos/1200/400');
}
<!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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="/css/style.css">
<title>Title</title>
</head>
<body>
<!-- Showcase Slider-->
<section class="showcase">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item carousel-image-1 active">
<div class="container">
<div class="carousel-caption d-none d-sm-block text-right mb-5">
<h1 class="display-3">
Heading One
</h1>
<p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus nostrum excepturi
repellendus quos provident sit! Odio odit quo voluptatum aperiam.</p>
Sign Up Now
</div>
</div>
</div>
<div class="carousel-item carousel-image-2 ">
<div class="container">
<div class="carousel-caption d-none d-sm-block mb-5">
<h1 class="display-3">
Heading Two
</h1>
<p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus nostrum excepturi
repellendus quos provident sit! Odio odit quo voluptatum aperiam.</p>
Learn More
</div>
</div>
</div>
<div class="carousel-item carousel-image-3 ">
<div class="container">
<div class="carousel-caption d-none d-sm-block text-right mb-5">
<h1 class="display-3">
Heading Three
</h1>
<p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus nostrum excepturi
repellendus quos provident sit! Odio odit quo voluptatum aperiam.</p>
Learn More
</div>
</div>
</div>
</div>
<a href="#myCarousel" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#myCarousel" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
</html>


<!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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="/css/style.css">
<title>Title</title>
</head>
<body>
<!-- Showcase Slider-->
<section class="showcase">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item carousel-image-1 active">
<div class="container">
<div class="carousel-caption d-none d-sm-block text-right mb-5">
<h1 class="display-3">
Heading One
</h1>
<p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus nostrum excepturi
repellendus quos provident sit! Odio odit quo voluptatum aperiam.</p>
Sign Up Now
</div>
</div>
</div>
<div class="carousel-item carousel-image-2 ">
<div class="container">
<div class="carousel-caption d-none d-sm-block text-right mb-5">
<h1 class="display-3">
Heading Two
</h1>
<p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus nostrum excepturi
repellendus quos provident sit! Odio odit quo voluptatum aperiam.</p>
Learn More
</div>
</div>
</div>
<div class="carousel-item carousel-image-3 ">
<div class="container">
<div class="carousel-caption d-none d-sm-block text-right mb-5">
<h1 class="display-3">
Heading Three
</h1>
<p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus nostrum excepturi
repellendus quos provident sit! Odio odit quo voluptatum aperiam.</p>
Learn More
</div>
</div>
</div>
</div>
<a href="#myCarousel" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#myCarousel" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<style>
section.showcase {
float: left;
width: 100%;
height: 100%;
}
.carousel {
float: left;
width: 100%;
position: unset;
}
.carousel-inner {
float: left;
width: 100%;
height: 100%;
position: unset !important;
}
.carousel-item {
float: left;
position: initial !important;
height: 100%;
width: 100%;
}
p.lead {
color: #000;
font-size: 14px;
}
h1.display-3 {
color: #000;
}
ol.carousel-indicators {
background: #000;
}
a.carousel-control-next {
background: #000;
}
a.carousel-control-prev {
background: #000;
}
</style>
</body>
</html>
I add styles... kindly check it

Related

How to vertically center content using Bootstrap v5.2

I'm trying to replicate this website vertical centering for my own website but I keep seen my content up to the top of the view port.
Expected result:
My code:
The snippet:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JorgeEscobar.XYZ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="container py-auto">
<header class="mb-auto"></header>
<div class="row align-items-center">
<div class="col-sm-4 align-self-center">
<img src="https://via.placeholder.com/200" class="img-fluid border border-primary rounded-circle mx-auto d-block" alt="Jorge Escobar's portrait picture">
</div>
<div class="col align-self-center">
<h1 class="text-center">Hola, soy <span class="text-primary">Jorge.</span></h1>
<p class="text-center text-muted">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam
perferendis libero itaque accusantium fugiat aperiam, illo natus voluptate!</p>
<div class="d-grid gap-2 col-6 mx-auto">
<a class="btn btn-primary text-center" href="https://drive.google.com/file/d/1CpPR5h1ZhHF2ftQGKEgcYfer5TAuAj33/view?usp=sharing" role="button" target="_blank" rel="noopener noreferrer">đŸ“„Curriculum Vitae</a>
</div>
</div>
</div>
<footer class="mt-auto text-white-50">
<p>Cover template for Bootstrap, by #mdo.</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
Thank you for your time.

It's not vertically centered because you haven't set the height to the parent (i.e., row).
See the snippet below.
.row {
height: 100vh;
border: 1px solid red;
}
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JorgeEscobar.XYZ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="container py-auto">
<header class="mb-auto"></header>
<div class="row align-items-center">
<div class="col-sm-4 align-self-center">
<img src="https://via.placeholder.com/200" class="img-fluid border border-primary rounded-circle mx-auto d-block" alt="Jorge Escobar's portrait picture">
</div>
<div class="col align-self-center">
<h1 class="text-center">Hola, soy <span class="text-primary">Jorge.</span></h1>
<p class="text-center text-muted">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam perferendis libero itaque accusantium fugiat aperiam, illo natus voluptate!</p>
<div class="d-grid gap-2 col-6 mx-auto">
<a class="btn btn-primary text-center" href="https://drive.google.com/file/d/1CpPR5h1ZhHF2ftQGKEgcYfer5TAuAj33/view?usp=sharing" role="button" target="_blank" rel="noopener noreferrer">đŸ“„Curriculum Vitae</a>
</div>
</div>
</div>
<footer class="mt-auto text-white-50">
<p>Cover template for Bootstrap, by #mdo.</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
EDIT
To reply #Jitender... Yes, but the OP didn't include header and footer into the code. Therefore, my original answer solves the problem. However, if OP wants to have a header and footer, then the snippet below is the solution.
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body class="d-flex h-100 text-center text-bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">Header</header>
<main>
<div class="row align-items-center">
<div class="col-sm-4 align-self-center">
<img src="https://via.placeholder.com/200" class="img-fluid border border-primary rounded-circle mx-auto d-block" alt="Jorge Escobar's portrait picture">
</div>
<div class="col align-self-center">
<h1 class="text-center">Hola, soy <span class="text-primary">Jorge.</span></h1>
<p class="text-center text-muted">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam perferendis libero itaque accusantium fugiat aperiam, illo natus voluptate!</p>
<div class="d-grid gap-2 col-6 mx-auto">
<a class="btn btn-primary text-center" href="https://drive.google.com/file/d/1CpPR5h1ZhHF2ftQGKEgcYfer5TAuAj33/view?usp=sharing" role="button" target="_blank" rel="noopener noreferrer">đŸ“„Curriculum Vitae</a>
</div>
</div>
</div>
</main>
<footer class="mt-auto">Footer</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>

The answer given above by Cerves is partially correct... If you are planning to replicate the view in the link provided... You can add a few stlyling like provided below
Like we should add the height to the whole body and have an overflow-y:hidden... this will not show scroll and limit you page view to the screen height... The container containing the content here "row" will be set to max-height of 100vh(height:100vh)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>JorgeEscobar.XYZ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
</head>
<body style="height: 100vh; overflow-y: hidden">
<div class="container py-auto">
<header class="mb-auto"></header>
<div class="row align-items-center" style="height: 100vh; overflow-y: hidden" >
<div class="col-sm-4 align-self-center">
<img src="https://via.placeholder.com/200" class="img-fluid border border-primary rounded-circle mx-auto d-block" alt="Jorge Escobar's portrait picture" />
</div>
<div class="col align-self-center">
<h1 class="text-center">
Hola, soy <span class="text-primary">Jorge.</span>
</h1>
<p class="text-center text-muted">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam
perferendis libero itaque accusantium fugiat aperiam, illo natus
voluptate!
</p>
<div class="d-grid gap-2 col-6 mx-auto">
<a class="btn btn-primary text-center" href="https://drive.google.com/file/d/1CpPR5h1ZhHF2ftQGKEgcYfer5TAuAj33/view?usp=sharing" role="button" target="_blank" rel="noopener noreferrer">đŸ“„Curriculum Vitae</a>
</div>
</div>
</div>
<footer class="mt-auto text-white-50">
<p>
Cover template for
Bootstrap,
by #mdo.
</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap 4 make a full height row inside a full screen jumbotron

I'm trying to align the items vertically inside a full-screen jumbotron.
This is my code
.jumbotron{
background: url("https://images.unsplash.com/photo-1499028344343-cd173ffc68a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&q=100") center center / cover no-repeat;
height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="jumbotron">
<div class="container text-center">
<div class="row" style="border: 2px solid white;">
<div class="col-12 text-light" >
<h1>Rin con Fuenteo</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius ratione, architecto similique autem commodi, suscipit vitae inventore provident eum ea unde, officia maiores dolore a voluptatum perspiciatis iste nam. Iste.</p>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
I use the border just to help me see the row. I'm looking for a solution to make this row has the same height as the jumbotron so I can make this text vertically in the center of the page.

What you can do is set the jumbotron and container elements to be display: flex, which will make the height of container and row to be 100% of the jumbotron. Then you set the row with the property align-items: center which will vertically center the content in row:
.jumbotron {
background: url("https://images.unsplash.com/photo-1499028344343-cd173ffc68a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&q=100") center center / cover no-repeat;
min-height: 100vh;
display: flex;
}
.container {
display: flex;
}
.row {
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="jumbotron">
<div class="container text-center">
<div class="row" style="border: 2px solid white;">
<div class="col-12 text-light">
<h1>Rin con Fuenteo</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius ratione, architecto similique autem commodi, suscipit vitae inventore provident eum ea unde, officia maiores dolore a voluptatum perspiciatis iste nam. Iste.</p>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

Anchor tags are breaking carousel slider - Bootstrap 4

Hoping someone can help me here.
Messing around with Bootstrap 4 carousel, and I've found that if the content of the slide has an anchor tag in there somewhere, the carousel simply will not go to that slide. I would like to keep the design of having a button to link to other parts of the site on the slide, but i don't know how to implement it if the carousel won't slide to it.
I did extensive troubleshooting, and it's definitely the a tag causing this, as the same code minus the anchor tag around the button works perfectly fine.
Thanks for the help.
Code is as follows:
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
<title>SW Events - Tasting Menus</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container" id="tastingCar">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="pics/soWhiskyGlass2Cropped.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<a href="https://www.thewhiskyambassador.com/courses-training/"><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button>
</div>
</div>
</div>
<div class="carousel-item">
<img src="pics/soWhisky1Cropped.jpg" class="rounded" alt="Gin Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Gin Tastings</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Private Tastings</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<a><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button></a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" 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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tastingTitle").fadeIn(750, function() {
$("#tastingCar").fadeIn(1000, function() {
$("#weddingSub").fadeIn(1250);
});
});
});
var myFunc = $(document).ready(function(){
$("#bookWedding").click(function () {
$("#chateauLogo").fadeOut(500);
$("#weddingSub").fadeOut(500);
$("#inAssoc").fadeOut(500);
$("#bookWedding").fadeOut(500, function () {
$("#weddingForm").fadeIn(500);
});
});
});
$(function () {
$( "#datepicker" ).datepicker();
} );
$('.carousel').carousel({
interval: false
});
</script>
</div>
</body>

I change the code,
obviously you can add anchor tag in bootstarp slider i just remove button and add class in anchor tag and then done.
You miss to close anchor tag.
never use a button as a child of anchor tag
Code is as follows:
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
<title>SW Events - Tasting Menus</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container" id="tastingCar">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="pics/soWhiskyGlass2Cropped.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
Find out more
</div>
</div>
</div>
<div class="carousel-item">
<img src="pics/soWhisky1Cropped.jpg" class="rounded" alt="Gin Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Gin Tastings</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Private Tastings</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
Find out more
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" 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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tastingTitle").fadeIn(750, function() {
$("#tastingCar").fadeIn(1000, function() {
$("#weddingSub").fadeIn(1250);
});
});
});
var myFunc = $(document).ready(function(){
$("#bookWedding").click(function () {
$("#chateauLogo").fadeOut(500);
$("#weddingSub").fadeOut(500);
$("#inAssoc").fadeOut(500);
$("#bookWedding").fadeOut(500, function () {
$("#weddingForm").fadeIn(500);
});
});
});
$(function () {
$( "#datepicker" ).datepicker();
} );
$('.carousel').carousel({
interval: false
});
</script>
</div>
</body>

<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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>
<title>SW Events - Tasting Menus</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container" id="tastingCar">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="Gin Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Gin Tastings</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/park.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Private Tastings</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<a><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button></a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" 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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tastingTitle").fadeIn(750, function() {
$("#tastingCar").fadeIn(1000, function() {
$("#weddingSub").fadeIn(1250);
});
});
});
var myFunc = $(document).ready(function(){
$("#bookWedding").click(function () {
$("#chateauLogo").fadeOut(500);
$("#weddingSub").fadeOut(500);
$("#inAssoc").fadeOut(500);
$("#bookWedding").fadeOut(500, function () {
$("#weddingForm").fadeIn(500);
});
});
});
$(function () {
$( "#datepicker" ).datepicker();
} );
$('.carousel').carousel({
interval: false
});
</script>
</div>
</body>
try this

Prevent Scaling up bootstrap card with an image when card-text is long

as you can see i have a image inside of a card, the image size is fixed and known but the card-text length might vary (short or too long).
the question is how can i prevent card height to scale up and force it to keep the height to just contain image and force the text to be wrapped and shorten.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" 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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="container body-content">
<div class="card text-center">
<div class="card-header" style="text-align:right;font-weight:bold;font-size:large" dir="rtl">
<p style="padding-right:20px;margin-bottom:0px">Post Header</p>
</div>
<div class="card-body" style="padding-top:0px;padding-bottom:0px;padding-right:0px">
<div class="row">
<div class="col-9">
<p style="padding-top:20px;padding-bottom:20px;text-align:right;white-space: normal;" dir="rtl" class="card-text">
This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long TextThis Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text
</p>
</div>
<div class="col-3">
<img class="img-fluid" src="http://fakeimg.pl/200/">
</div>
</div>
</div>
</div>
</div>

Using the property overflow:hidden and dynamically setting the height of the div solves the problem. Add onresize="myFunction()" and onload="myFunction()" to your body tag.
function myFunction()
{
var a=document.getElementById("image").height;
document.getElementById("test").style.height = a+"px";
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" 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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<body onresize="myFunction()" onload="myFunction()">
<div class="container body-content">
<div class="card text-center">
<div class="card-header" style="text-align:right;font-weight:bold;font-size:large" dir="rtl">
<p style="padding-right:20px;margin-bottom:0px">Post Header</p>
</div>
<div class="card-body" style="padding-top:0px;padding-bottom:0px;padding-right:0px;max-height:200px !important;">
<div class="row">
<div class="col-9" style="overflow:hidden;" id="test">
<p style="padding-top:20px;padding-bottom:20px;text-align:right;" dir="rtl" class="card-text">
This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long TextThis Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text
</p>
</div>
<div class="col-3">
<img class="img-fluid" src="http://fakeimg.pl/200/" id="image">
</div>
</div>
</div>
</div>
</div>
</body>
Hope this helps!!

You can set a fixed height and hide the overflowing content with overflow: hidden. To make things look pretty I also faded out the last few words
.truncate-text {
position: relative;
height: 4.6em; /* height of 3 lines of text */
overflow: hidden;
}
.truncate-text::after {
content: "";
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
width: 40%;
height: 1.7em;
position: absolute;
bottom: 0;
right: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" 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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="container body-content">
<div class="card text-center">
<div class="card-header" style="text-align:right;font-weight:bold;font-size:large" dir="rtl">
<p style="padding-right:20px;margin-bottom:0px">Post Header</p>
</div>
<div class="card-body" style="padding-top:0px;padding-bottom:0px;padding-right:0px">
<div class="row">
<div class="col-9" style="padding-top:20px;padding-bottom:20px;text-align:right;white-space: normal;">
<div class="truncate-text">
<p dir="rtl" class="card-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos sint consequatur quidem in blanditiis ab, eaque ad, ducimus quasi laboriosam corporis dolores vero. Tempore explicabo veritatis suscipit ratione ut voluptatem aut consectetur rem eaque cum fuga, sunt distinctio dolorem ducimus ipsum nihil nostrum? Iusto accusamus voluptate culpa vero! Libero saepe necessitatibus, ipsum aut dolores nihil voluptates recusandae. Quibusdam repellendus iste aperiam quas voluptates! Pariatur veritatis inventore debitis sed facere ratione aliquid iste libero nobis ea voluptatum harum delectus, laborum quisquam at aut necessitatibus consequatur explicabo ipsum odio, facilis cum iusto quam! Corrupti soluta amet eligendi labore odit asperiores vel aliquid?
</p>
</div>
</div>
<div class="col-3">
<img class="img-fluid" src="http://fakeimg.pl/200/">
</div>
</div>
</div>
</div>
</div>

my html code works in codepen but not in chrome browser

I put this specific code into codepen, and it displays correctly and looks great, but when i export the file and open it up through local chrome browser it does not work properly. The static headline keeps displaying below the carousel instead of in the carousal, here is the code im using.
.main-text {
position: absolute;
top: 50px;
width: 96.66666666666666%;
color: #FFF;
}
.btn-min-block {
min-width: 170px;
line-height: 26px;
}
.btn-clear {
color: #FFF;
background-color: transparent;
border-color: #FFF;
margin-right: 15px;
}
.btn-clear:hover {
color: #000;
background-color: #FFF;
}
.carousel-caption {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Depot Sqaure</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/class" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/mainimg01.png" alt="First slide">
<div class="carousel-caption">
<h3>
Your elegant and affordable destination</h3>
<p>
for family, business, and community events.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x500/9b59b6/8e44ad" alt="Second slide">
<div class="carousel-caption">
<h3>
Second slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x500/34495e/2c3e50" alt="Third slide">
<div class="carousel-caption">
<h3>
Third slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
</span></a>
</div>
<div class="main-text hidden-xs">
<div class="col-md-12 text-center">
<h1>
Static Headline And Content</h1>
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<div class="">
<a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">MORE ABOUT US</a><a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">CHECK AVAILABILITY</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="push">
</div>
</body>
</html>