How can I center an image over a Bootstrap 5 Carousel? - html

I took the documentation from Bootstrap and everything works fine, but I need the logo to be in the center of the carousel, even when the image changes. I've tried with relative parent but it seems like something is off.
<div class="container-fluid g-5">
<div class="row">
<div class="col-12">
<div id="carouselExampleSlidesOnly" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/section1/home-image.jpg" class="d-block img-fluid w-100" alt="...">
</div>
<div class="carousel-item">
<img src="/images/section1/home-img-2.jpg" class="d-block img-fluid w-100" alt="...">
</div>
</div>
<div class="logo">
<img src="/images/section1/home-logo.png" alt="">
</div
</div>
</div>
</div>
</div>
#section .container-fluid{
position: relative;
width: 100%;
height: 85vh;
z-index: 0;
}
#section .logo{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}


So if I understood your issue correctly then you only need to use display:flex and center the logo both vertically and horizontally. So here is your code
.carousel {
position: relative; //.logo is inside .carousel
}
.logo {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container-fluid g-5">
<div class="row">
<div class="col-12">
<div id="carouselExampleSlidesOnly" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/section1/home-image.jpg" class="d-block img-fluid w-100" alt="...">
</div>
<div class="carousel-item">
<img src="/images/section1/home-img-2.jpg" class="d-block img-fluid w-100" alt="...">
</div>
</div>
<div class="logo">
<img src="/images/section1/home-logo.png" alt="">
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
I hope this solves your issue. Please run the code on your system because image is missing here.

Related

Why is there a gap on the right side of my container?

I'm working on an assignment and I'm only allowed to use HTML, CSS & Bootstrap. I started my project and everything went well until I noticed there's a gap on the right side of my container. Why is this and how can I remove it? Thanks in advance!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tarea Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Saira+Condensed&display=swap" rel="stylesheet">
</head>
<body>
<div class="container-fluid" style="padding-left: 0; padding-right: 0;">
<!-- Header -->
<header></header>
<nav class="navbar justify-content-center navbar-dark bg-dark">
<div>
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Pet Care
</li>
<li class="nav-item">
Volunteer
</li>
<li class="nav-item">
Adopt an friend!
</li>
<li class="nav-item">
Donate
</li>
<li class="nav-item">
Contact us
</li>
</ul>
</div>
</nav>
<main>
<div class="row row-cols-1 sec1 box">
<div class="col">
<img class="img-fluid rounded mx-auto mt-5 d-block" src="/img/logo.png">
</div>
</div>
<div class="row row-cols-1 sec2 box" style="width: 100%;">
<div class="col mt-3">
<h1>Who we are:</h1>
</div>
<div class="col mb-5 text-center">
<p>The New Hope Animal Shelter NHAS is a registered charity that has been operating for 150 years. The Society provides care, comfort and compassion to animals in need in communities across the country. It values all animals and advocates to treat them with respect and kindness. The Society strives to keep pets and families together and do so through a variety of community support services, such as sheltering and adoptions, including emergency sheltering, feral cat management programs, animal transfers, food distribution, humane education, animal advocacy, and spay/neuter services. The NHAS does not receive annual government funding and relies on donations to provide programs and services to help animals in need.</p>
</div>
</div>
<div class="row row-cols-1 sec3 box">
<div class="col align-self-center">
<h1>Compassion for animals is intimately connected with goodness of character; and it may be confidently asserted that he who is cruel to animals cannot be a good man.</h1>
<p>-S. Chopenhauer</p>
</div>
</div>
<div class="row row-cols-1 sec4 box">
<div class="col">
<h1>From our Supporters</h1>
</div>
<div id="carouselExampleControls" class="col carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/carousel1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/carousel2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/540518/pexels-photo-540518.jpeg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</main>
<section>
</section>
<footer>
<p></p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
CSS:
html{
height: 100%;
width: 100%;
}
body{
background-color: #116D44;
background-position: center;
}
header{
align-items: center;
}
nav{
font-family: 'Saira Condensed', sans-serif;
}
.box{
width: 100%;
height: 600px;
padding: 40px 60px;
color: white;
font-family: 'Saira Condensed', sans-serif;
text-align: center;
}
.box h1{
font-family: 'Anton', sans-serif;
font-size: 50px;
text-shadow: 0px 0px 5px #000;
}
.box p{
font-size: 25px;
margin-top: 100px;
}
.sec1{
height: 100vh;
background-image: url(/img/indexbg1.jpg);
background-attachment: fixed;
background-size: cover;
}
.sec2{
background: #28689c;
}
.sec3{
height: 100vh;
background-image: url(/img/indexbg2.jpg);
background-attachment: fixed;
background-size: cover;
}
.carousel{
width: 640px;
height: 360px;
margin: 0 auto;
}
.carousel-inner img{
width: 640px;
height: 360px;
}
.sec4{
background: #546C08;
}
In order to remove the gap on the right, I tried to set the "max-width: unset", "overflow-x: hidden; width: 100vw;" on the body, "padding-right: 0; margin-right: 0;" on my .row classes, adding "img-fluid" to the images in my carousel, setting margin, padding and width to 0, 0 & 100vw respectively, setting "box-sizing: border-box;" on my html and "margin: 0;" on the body but to no avail.

Just remove margin-left on the row class.
html {
height: 100%;
width: 100%;
}
body {
background-color: #116D44;
background-position: center;
}
header {
align-items: center;
}
nav {
font-family: 'Saira Condensed', sans-serif;
}
.box {
width: 100%;
height: 600px;
padding: 40px 60px;
color: white;
font-family: 'Saira Condensed', sans-serif;
text-align: center;
}
.box h1 {
font-family: 'Anton', sans-serif;
font-size: 50px;
text-shadow: 0px 0px 5px #000;
}
.box p {
font-size: 25px;
margin-top: 100px;
}
.sec1 {
height: 100vh;
background-image: url(/img/indexbg1.jpg);
background-attachment: fixed;
background-size: cover;
}
.sec2 {
background: #28689c;
}
.sec3 {
height: 100vh;
background-image: url(/img/indexbg2.jpg);
background-attachment: fixed;
background-size: cover;
}
.carousel {
width: 640px;
height: 360px;
margin: 0 auto;
}
.carousel-inner img {
width: 640px;
height: 360px;
}
.sec4 {
background: #546C08;
}
main .row {
margin-left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tarea Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Saira+Condensed&display=swap" rel="stylesheet">
</head>
<body>
<div class="container-fluid" style="padding-left: 0; padding-right: 0;">
<!-- Header -->
<header></header>
<nav class="navbar justify-content-center navbar-dark bg-dark">
<div>
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Pet Care
</li>
<li class="nav-item">
Volunteer
</li>
<li class="nav-item">
Adopt an friend!
</li>
<li class="nav-item">
Donate
</li>
<li class="nav-item">
Contact us
</li>
</ul>
</div>
</nav>
<main>
<div class="row row-cols-1 sec1 box">
<div class="col">
<img class="img-fluid rounded mx-auto mt-5 d-block" src="/img/logo.png">
</div>
</div>
<div class="row row-cols-1 sec2 box" style="width: 100%;">
<div class="col mt-3">
<h1>Who we are:</h1>
</div>
<div class="col mb-5 text-center">
<p>The New Hope Animal Shelter NHAS is a registered charity that has been operating for 150 years. The Society provides care, comfort and compassion to animals in need in communities across the country. It values all animals and advocates to treat
them with respect and kindness. The Society strives to keep pets and families together and do so through a variety of community support services, such as sheltering and adoptions, including emergency sheltering, feral cat management programs,
animal transfers, food distribution, humane education, animal advocacy, and spay/neuter services. The NHAS does not receive annual government funding and relies on donations to provide programs and services to help animals in need.</p>
</div>
</div>
<div class="row row-cols-1 sec3 box">
<div class="col align-self-center">
<h1>Compassion for animals is intimately connected with goodness of character; and it may be confidently asserted that he who is cruel to animals cannot be a good man.</h1>
<p>-S. Chopenhauer</p>
</div>
</div>
<div class="row row-cols-1 sec4 box">
<div class="col">
<h1>From our Supporters</h1>
</div>
<div id="carouselExampleControls" class="col carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/carousel1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/carousel2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/540518/pexels-photo-540518.jpeg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</main>
<section>
</section>
<footer>
<p></p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>

bootstrap mobile view is not working properly

working with Bootstrap 4 and I have following bootstrap codes with external css file in the html view,
<div class="jumbotron rounded-0">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="{{asset('images/flowler.jpg')}}" alt="..." class="rounded-circle">
</div>
</div>
</div>
</div>
External css
.rounded-circle{
vertical-align: left;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: -100%;
top: -50px;
}
but in mobile view in the browser above images not displaying properly. it is not in the correct position. how could I fix this problem?
1: https://i.stack.imgur.com/daggf.png`enter code here`

You specify the value left: -100%; You move the image out of the page
.rounded-circle{
vertical-align: left;
width: 100px;
height: 100px;
border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<body>
<!-- Start your code here -->
<div class="jumbotron rounded-0">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://www.ivertech.com/Articles/Images/KoalaBear200x200.jpg" alt="..." class="rounded-circle">
</div>
</div>
</div>
</div>
<!-- End your code here -->
</body>
</html>

Vertically center div inside Bootstrap carousel

I have the following structure:
<div class="carousel" id="my-carousel">
<div class="carousel-item">
<div class="text-center">
...
</div>
</div>
<div class="carousel-item">
<div class="text-center">
...
</div>
</div>
<div class="carousel-item">
<div class="text-center">
...
</div>
</div>
</div>
I also have the following script for normalizing the carousel:
function normalizeCarousel() {
function normalize() {
var maxHeight = 0;
$(".carousel-item").each(function() {
var currentHeight = $(this).height();
if (currentHeight > maxHeight) {
maxHeight = currentHeight;
}
});
$("#my-carousel").css("height", maxHeight);
};
normalize();
$(window).on("resize orientationchange", function() {
normalize();
});
}
$(document).ready(function() {
normalizeCarousel();
});
Here is the JSFiddle: JSFiddle
What I'm trying to do is vertically align each text-center div inside the carousel-items. I've tried using flexbox but couldn't manage to make it work!
Thank you in advance!

This is ought to do the trick
.carousel-item {
display: table;
}
.text-center {
display: table-cell;
vertical-align:middle;
}

with flexbox, use something like this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
div.text-center {
position: absolute;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
width: 100%;
color: red;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="text-center">Text Vertically Center Aligned</div>
<img src="la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<div class="text-center">Text Vertically Center Aligned</div>
<img src="chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<div class="text-center">Text Vertically Center Aligned</div>
<img src="ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<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>
</body>
</html>

Bootstrap panel on top of image

I am working with Bootstrap 3 and need to make a banner inspired of this page.
I have made this until now: Codepen.
The picture is not responsive. I can make the picture responsive if i add the class img-responsive to the img src tag, but then this happens.
How can I make the picture responsive, and make the box float on top of the picture on all screensizes?
<div class="container">
<div class="row">
<!-- Picture Column -->
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
<div>
<img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" ></img>
</div>
</div>
<!-- Contact Column-->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 pull-right-sm" style="padding-top: 80px;">
<div>
<div class="panel panel-default">
<div class="panel-heading">Contact</div>
<div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
</div>
</div>
</div>
</div><!--/row-->
</div><!--/container-->

Added a new relative (container for image) and absolute(container for panel) div div and removed unnecessary classes.
.abc {
position: relative;
}
.def {
position: absolute;
top: 30px;
right: 20px;
max-width: 300px;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!-- Picture Column -->
<div class="col-sm-12">
<div class="abc">
<img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" ></img>
<div class="def">
<div class="panel panel-default">
<div class="panel-heading">Contact</div>
<div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
</div>
</div>
</div>
</div>
<!-- Contact Column-->
</div>
<!--/row-->
</div>
<!--/container-->
</body>
.abc {
position: relative;
}
.def {
position: absolute;
top: 10px;
right: 20px;
max-width: 300px;
}
#media screen and (max-width: 480px) {
.def {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 480px;
width: 95%;
height: 85%;
}
.panel.panel-default .panel-heading {
padding: 5px 15px;
}
.panel.panel-default .panel-body {
padding: 5px;
}
img.img-responsive {
height: 200px;
}
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!-- Picture Column -->
<div class="col-sm-12">
<div class="abc">
<img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" />
<div class="def">
<div class="panel panel-default">
<div class="panel-heading">Contact</div>
<div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
</div>
</div>
</div>
</div>
<!-- Contact Column-->
</div>
<!--/row-->
</div>
<!--/container-->
</body>

add this css to your div "col-lg-3 col-md-3 col-sm-4 col-xs-12 pull-right-sm"
padding-top: 40px;
position: absolute;
top: 0;
right: 5%;
and place it like this
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
<div>
<img src="https://www.lollypop.org/wp-content/uploads/2018/03/Blog_03_16_18_Photo-1-1200x400.jpg" class="img-responsive" ></img>
</div>
<!-- Contact Column-->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 pull-right-sm" style="padding-top: 80px;">
<div>
<div class="panel panel-default">
<div class="panel-heading">Contact</div>
<div class="panel-body">Here is the contact information gonna be. There will be a telephone number, open/closing times and an e-mail.</div>
</div>
</div>
</div>
</div>

how to center h1 and p in a carousel

this is doing my head in,i'm trying to simply put my h1 and p in the center of the carousel so even when the image changes, the text(h1 and p) remain the same at all times.
I have tried messing around with the positions but it created a real mess.
I realize there are multiple ways to achieve this but what is the most simple
Thank you
html
<!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.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="resources/css/style.css">
<title>Hello, world!</title>
</head>
<body>
<div class="carousel-header">
<h1>Front End Web Developer</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero unde laudantium aliquam eveniet nesciunt quae.</p>
</div>
<!-- Carousel -->
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1522199794616-8a62b541f762?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=71b5877630deb9ab5996f91cc61b43f7&auto=format&fit=crop&w=1352&q=80" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1516876617270-291a72282e2e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=69a79b43d8f9e7955700865783aaf00e&auto=format&fit=crop&w=1225&q=80" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1514557179557-9efc4d7949cc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fc34800506787363e917e96d6b091817&auto=format&fit=crop&w=1350&q=80" alt="Third slide">
</div>
</div>
</div>
CSS
body {
position: relative;
height: 100%;
}
/*<!-- Carousel -->*/
.carousel-inner {
height: 50rem;
}
/*<!-- Carousel Text -->*/
.carousel-header h1 {
text-align: center;
}
.carousel-header p {
text-align: center;
}

You can try with this code, I don't have include any media tag for make it responsive anyway, this way it will work at 100%.
The Code:
body {
position: relative;
height: 100%;
}
.carousel-container{
position: relative;
height: 100%;
width: 100%;
}
/*<!-- Carousel -->*/
.carousel-inner {
height: fit-content;
}
/*<!-- Carousel Text -->*/
.carousel-header{
position:absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 100;
}
.carousel-header h1 {
text-align: center;
}
.carousel-header p {
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="resources/css/style.css">
<title>Hello, world!</title>
</head>
<body>
<div class="carousel-container">
<div class="carousel-header">
<h1>Front End Web Developer</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero unde laudantium aliquam eveniet nesciunt quae.</p>
</div>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1522199794616-8a62b541f762?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=71b5877630deb9ab5996f91cc61b43f7&auto=format&fit=crop&w=1352&q=80" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1516876617270-291a72282e2e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=69a79b43d8f9e7955700865783aaf00e&auto=format&fit=crop&w=1225&q=80" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1514557179557-9efc4d7949cc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fc34800506787363e917e96d6b091817&auto=format&fit=crop&w=1350&q=80" alt="Third slide">
</div>
</div>
</div>
</body>
</html>
I hope I helped you,
Greetings.