Text over an image - html

How do I put some texts inside this carousel? I have to put some texts like some info about something, a big title and also the menu on top of it. How do I do that? I looked for some answers here but none of them worked for me, I tried to change some display to relative and absolute but didn't work.
It's like, how do I write an h1 and move it freely over the image of the carousel?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<div class="carousel-menu">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../Site sem nome 2/gd1111.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../Site sem nome 2/tw11111.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../Site sem nome 2/rol111.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

Reference:
https://bootsnipp.com/snippets/featured/bootstrap-carousel-with-text
html
------------
<div class="container">
<div class="row">
<!-- Carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="First slide">
<!-- Static Header -->
<div class="header-text hidden-xs">
<div class="col-md-12 text-center">
<h2>
<span>Welcome to <strong>LOREM IPSUM</strong></span>
</h2>
<br>
<h3>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</h3>
<br>
<div class="">
<a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div>
</div>
</div><!-- /header-text -->
</div>
<div class="item">
<img src="https://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="Second slide">
<!-- Static Header -->
<div class="header-text hidden-xs">
<div class="col-md-12 text-center">
<h2>
<span>Welcome to LOREM IPSUM</span>
</h2>
<br>
<h3>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</h3>
<br>
<div class="">
<a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div>
</div>
</div><!-- /header-text -->
</div>
<div class="item">
<img src="https://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="Third slide">
<!-- Static Header -->
<div class="header-text hidden-xs">
<div class="col-md-12 text-center">
<h2>
<span>Welcome to LOREM IPSUM</span>
</h2>
<br>
<h3>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</h3>
<br>
<div class="">
<a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div>
</div>
</div><!-- /header-text -->
</div>
</div>
<!-- Controls -->
<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><!-- /carousel -->
</div>
</div>
------
css
------
.container {
margin-top: 20px;
}
/* Carousel Styles */
.carousel-indicators .active {
background-color: #2980b9;
}
.carousel-inner img {
width: 100%;
max-height: 460px
}
.carousel-control {
width: 0;
}
.carousel-control.left,
.carousel-control.right {
opacity: 1;
filter: alpha(opacity=100);
background-image: none;
background-repeat: no-repeat;
text-shadow: none;
}
.carousel-control.left span {
padding: 15px;
}
.carousel-control.right span {
padding: 15px;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
position: absolute;
top: 45%;
z-index: 5;
display: inline-block;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
left: 0;
}
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
right: 0;
}
.carousel-control.left span,
.carousel-control.right span {
background-color: #000;
}
.carousel-control.left span:hover,
.carousel-control.right span:hover {
opacity: .7;
filter: alpha(opacity=70);
}
/* Carousel Header Styles */
.header-text {
position: absolute;
top: 20%;
left: 1.8%;
right: auto;
width: 96.66666666666666%;
color: #fff;
}
.header-text h2 {
font-size: 40px;
}
.header-text h2 span {
background-color: #2980b9;
padding: 10px;
}
.header-text h3 span {
background-color: #000;
padding: 15px;
}
.btn-min-block {
min-width: 170px;
line-height: 26px;
}
.btn-theme {
color: #fff;
background-color: transparent;
border: 2px solid #fff;
margin-right: 15px;
}
.btn-theme:hover {
color: #000;
background-color: #fff;
border-color: #fff;
}

Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
now you can use v4.0.0-beta please refer this link
https://getbootstrap.com/docs/4.0/components/carousel/#slides-only
Try like this,im used for the bootstrap 3(just an example )
.full-width {
width: 100%;
}
.carousel-caption {
position: absolute;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/300x200" class="full-width" />
<div class="carousel-caption">
<div class="full-width text-center">
<p>
Some text which is vertically, horizontally centered in image
</p>
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/300x200" class="full-width" />
<div class="carousel-caption">
<div class="full-width text-center">
Some text which is vertically, horizontally centered in image
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Related

White background when moving between carousel slides

I have a problem with my html website. I am currently using Bootstrap-5. When I change the slides using carousel in website, there is white blanks keep appearing. How can I deal with this problem?
Here is my code!
HTML
<!doctype html>
<html lang="kr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<title>P&P</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#">P & P</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav m-auto my-2 my-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Some Script
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Some script</a></li>
<li><a class="dropdown-item" href="#">Some script</a></li>
<li><a class="dropdown-item" href="#">Some script</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link active"href="#">Some script</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Some script</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Some script</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="lemon_wp.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>Some script</h5>
<h6><br>Some script</h6>
</div>
</div>
<div class="carousel-item">
<img src="lemon_wp.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>đź‘‘</h5>
<h6>Some script<br>Other script</h6>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
<section class="babies">
<div class="container py-5">
<div class="row py-5">
<class class="col-lg-5">
<h1></h1>
</class>
</div>
</div>
</section>
</html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navbar-brand{
font-size: 2rem;
color: black;
}
.navbar-brand:hober{
color: black;
}
.nav-link{
margin-right: 10px;
margin-left: 10px;
color: black;
text-transform: uppercase;
}
.nav-link:hover{
color: black;
}
.main{
background-color: lemonchiffon;
background-size: cover;
height: 100vh;
width: 100%;
background-position: 50% 50%;
}
.main h1{
font-size: 4rem;
font-weight: 700;
/*fontfamiliy*/
}
.absolute-div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.item {
position:relative;
}
.carousel-item{
height: 100vh;
min-height: 300px;
background: no-repeat scroll center scroll;
-webkit-background-size: cover;
background-size: cover;
}
.carousel-item::before{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.carousel-caption{
bottom: 35%;
padding-left: 100px;
padding-right: 100px;
color: black;
}
.carousel-caption h5{
font-size: 100px;
font-weight: 700;
}
.carousel-caption h6{
font-size: 60px;
font-weight: 600;
}
.carousel-control-next-icon:after{
content: '>';
font-size: 55px;
color: black;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: black;
}
.carousel {
width:100% !important;
overflow: hidden !important;
right:0 !important;
}
.carousel-inner{
overflow:visible
}
I cannot really find the problem in my code.
The carousel example that I use is from the bootstrap official site.
I don't know why this is happening but you can try this it works on your code
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="a.lpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>Some script</h5>
<h6><br>Some script</h6>
</div>
</div>
<div class="carousel-item">
<img src="b.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>Some script</h5>
<h6><br>Some script</h6>
</div>
</div>
<div class="carousel-item">
<img src="c.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>Some script</h5>
<h6><br>Some script</h6>
</div>
</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>
and you don't need this code on your css you have it by default in bootstrap
.carousel-control-next-icon:after{
content: '>';
font-size: 55px;
color: black;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: black;
}
dear when you add carousel slider it auto append white arrow for slider movement to left right its part of carousel default css and in your css you had also added the arrow by the code given below
.carousel-control-next-icon:after{
content: '>';
font-size: 55px;
color: black;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: black;
}
try to comment it so it will remove the black arrow
or use carousal javacript method to remove the black arrow

Bootstrap carousel image is not being showed responsive, inside RenderBody()

I am trying to create carousel responsive image inside the index home page which are being displayed inside the common layout page. But when I reduce the height carousel-item div, full image is not being showed in index html. How can I show the full image as responsive , even if I reduce the height of carousel-item div.?
My code given below
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - MyCompany</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<div class="container-fluid icon-top py-4 px-5">
<div class="row">
</div>
</div>
<header id="header">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MyCompany</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Our Project</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="body-container">
#RenderBody()
</div>
<footer class="border-top footer text-muted">
<div class="container" id>
© 2021 - MyCompany - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/js/all.js"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Index.cshtml
#{
ViewData["Title"] = "Home Page";
}
<section id="home-heading">
<div id="MyCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item carousel-image-1 active">
</div>
<div class="carousel-item carousel-image-2">
</div>
<div class="carousel-item carousel-image-3">
</div>
</div>
<a class="carousel-control-prev" href="#MyCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#MyCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- INFO SECTION -->
<section id="info" class="py-3>
<div class=" container">
<div class="row">
<div class="col-md-8 align-self-center">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate eveniet blanditiis incidunt iusto
corrupti illum cum laudantium ex sequi amet. ssfsdfs fjjerhehr uiewruhweuiruiewruyhyuewiry iweuyr
ryewiuryiweuy. uieeryewi iuweriwe yb 7weyr7ewy87r7ywe8ry8wer8 we87r y87we78r7we8r
7we87rwe87r87wer8werweuewof
w8ueuwe88ur9we8r </p>
Learn More
</div>
<div class="col-md-4">
<img src="img/laptop.png" alt="" class="img-fluid">
</div>
</div>
</div>
</section>
Site.css
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
#body-container {
/* */
top: 0;
bottom: 0;
right: 0;
left: 0;
}
/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
/* Vertically center the text there */
}
.icon-top {
background-color: chocolate;
}
.navbar .nav-link {
font-size: 14px !important;
text-align: right !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.navbar .nav-item.active {
border-left: #444 3px solid;
}
.carousel-item {
height: 800px;
}
.carousel-image-1 {
background: url('../img/banner-1.jpeg');
background-size: cover;
}
.carousel-image-2 {
background: url('../img/banner-2.jpeg');
background-size: cover;
}
.carousel-image-3 {
background: url('../img/banner-3.jpeg');
background-size: cover;
}
With Many Thanks
Pol
Add this to your Layout page.
#RenderSection("style", required: false)
Now add your Carousel code to any View page. under#section style{ "your bootstrap carousel code"} so for that, you will successfully show your carousel where you want. also, the carousel fits the full image as responsive.
#section style{
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin-top:-15px">
<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" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img1" />
<div class="carousel-caption">
<h3>Image 1</h3>
<p>A happy image</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img2" />
<div class="carousel-caption">
<h3>Image 2</h3>
<p>A new image</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img3" />
<div class="carousel-caption">
<h3>Image 3</h3>
<p>An old image</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
}

Image caption not showing on slider

I'm trying to make a slider (imported from bootstrap) with captions on the bottom of the images using HTML and CSS, it does work on two images but not the third one.
Here's the code for the slider and the style.css portion that is used for the slider and caption.
HTML:
<!-------Slider------>
<div id="slider">
<div id="headerSlider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#headerSlider" data-slide-to="0" class="active"></li>
<li data-target="#headerSlider" data-slide-to="1"></li>
<li data-target="#headerSlider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/slider1.jpg" class="d-block w-100" alt="Portfolio">
<div class="carosuel-caption">
<h5>A random caption</h5>
</div>
</div>
<div class="carousel-item">
<img src="img/slider2.jpg" class="d-block w-100" alt="Portfolio">
<div class="carosuel-caption">
<h5>A random caption 1</h5>
</div>
</div>
<div class="carousel-item">
<img src="img/slider3.jpg" class="d-block img-fluid" alt="Portfolio">
<div class="carosuel-caption">
<h5>A random caption 2</h5>
</div>
</div>
<a class="carousel-control-prev" href="#headerSlider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#headerSlider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS:
#slider
{
margin: 0 auto;
width: 800px;
}
.carosuel-caption
{
top: 100%;
transform: translateY(-50%);
bottom: initial!important;
}
.carosuel-caption h5
{
color: #fff;
font-size: 42px;
}
.carousel-item
{
width: 80%;
height: 50%;
background-color: black;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
margin-top: 5%;
}
Picture of the slider:
Working slider image with caption
The slide in which it has no caption
I apologize if I missed something in the post.

Positioning div to botton right from css

Here i have a carousel. i need to position booton right the container NOIMAGE, the parent container should be .carousel-inner.
<div class="list-offers">
<div class="container">
<div class="row1">
<div class="col-xs-12 item bg_fix right" style="background-image: url("./images/bottom.jpg");">
<img class="foto" alt="Beach" title="Beach" itemprop="image" src="./images/bottom.jpg" style="display: none;">
<div class="col-xs-12 item ">
<div data-ride="carousel" class="carousel slide" id="myCarousel2">
<div class="carousel-inner">
<div class="item noimage">
<h4 itemprop="name">¡consectetuer adipiscing elit!</h4>
<p itemprop="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="item noimage active">
<h4 itemprop="name">¡consectetuer adipiscing elit!</h4>
<p itemprop="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="item noimage">
<h4 itemprop="name">consectetuer adipiscing elit!</h4>
<p itemprop="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#myCarousel2"></li>
<li data-slide-to="1" data-target="#myCarousel2" class="active"></li>
<li data-slide-to="2" data-target="#myCarousel2" class=""></li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
Here is what i have intend. taking the 2 containers and trying to styling it properly, but unsuccessfully no works
.carousel-inner {
background-color: aqua !important;
position: relative !important;
width: 100%;
height: 200px;
border: 3px solid #73AD21
}
.noimage {
/*display: flex;*/
position: absolute !important;
bottom: 0 !important;
right: 0 !important;
width: 600px;
height: 100px;
background-color: blue;
border: 3px solid #73AD21
}
If I understand you correctly, you're trying to add a button at the right bottom of your carousel. If so, the demo shows the Bootstrap carousel where I've positioned the button as absolute inside the parent carousel-inner container as you wanted. But, I've kept the original carousel-inner properties and not interfered with these.
.rightBtn {
position: absolute;
bottom: 0px;
right: 0px;
background-color: teal;
color: white;
border-radius: 4px;
margin: 0px 10px 10px 0px;
padding: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-item active">
<img class="d-block w-100" src="https://picsum.photos/300?image=28" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/300?image=29" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/300?image=30" alt="Third slide">
</div>
<span class="rightBtn">button</span>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Custom carousel size in Bootstrap but responsive

Is this carousel style possible for Bootstrap?
I've been trying this for days, I need help :(
First picture is the wireframe, ...
and the second picture is the actual look in the browser I'm working on...
...but it seems like it's not responsive when moved into larger screens
Here's the HTML-code:
<section id="wow_h>
<div class="container-fluid">
<div class="row">
<div id="carouselExampleIndicators" class="carousel slide carousel-style " data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/assets/Untitled-1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/assets/Untitled-2.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/assets/Untitled-3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id ="hero-title" class="">
<h1>Headline
</br>
goes here</h1>
<p>Hero subtitle goes here
</br>
lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</section>
And here's the CSS-code:
// HOME
.carousel{
z-index: 1000;
margin: -5% 0 0 0;
}
#carouselExampleIndicators{
img{
background: cover;
}
}
.carousel-indicators > li {
border-radius: 50%;
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: block;
}
#wow_home{
position: relative;
#hero-title{
border-radius: 25px;
background: #f2efef;
color: #000;
z-index: 1080;
padding: 5%;
margin: 0 0 0 60%;
position: absolute;
h1{
text-transform: none;
}
}
}