I can't get my text to display under my carousel - html

I'm trying to learn bootstrap 4 and I'm struggling to get my h2 text to display under the carousel.
<a class="carousel-control-next" href="#slides" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</div>
<!--------->
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-12">
<h2 class="display-4">
*text*
</h2>
</div>
</div>
</div>
only relevant css
.carousel-inner> #imageSize{
height: 450px;
width: 100%;
}


You need to add height to the container-fluid class
.container-fluid{
height: 10rem;
}
View jsFiddle link to see the implementation https://jsfiddle.net/ykxt4qzd/

Related

how to add heading and text over an image carousel

I want to add a heading and text in an image carousel. When it write h1 or p tags the text goes down under text. I want to keep it in middle of my image. I am using bootstrap framework.
Here is my code:
<section>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/cover/cover-1.png" class="d-block w-100 image-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="images/cover/cover-2.jpg" class="d-block w-100 h-auto image-fluid" alt="...">
</div>
<div class="carousel-item">
<img src="images/cover/cover-3.jpg" class="d-block w-100 image-fluid" 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>
</section>

Please refer to the bootstrap documentation for captions on carousel here - https://getbootstrap.com/docs/4.0/components/carousel/#with-captions
If you want to place the text in middle of the image, change/add the below code in your css for carousel-caption
.carousel-caption {
position: absolute;
right: 15%;
top: 45%; // this will help in placing the content in middle vertically
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
}

Rescale Bootstrap columns to be the same height as another column?

So I have been having to struggle with this for quite a while, I am not sure how to resize the carousel so that it matches the column height of the blockquote and I can't seem to centre the image div inside the carousel. If I have a large image, the carousel becomes taller than the text.
I would like image1 to be scaled to the same height as image2 whilst also keeping the same aspect ratio.
Here is my code:
Best to view it fullscreen.
.project {
background-color: lightblue;
}
.image1 {
height: 500px;
width: 350px;
background-color: #3178bf;
}
.image2 {
height: 300px;
width: 200px;
background-color: #3178bf;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="project">
<div class="row align-items-center">
<div class="col-sm-7">
<blockquote class="blockquote text-left description">
<h3 style="margin-left: 30px; margin-top: 10px;">
Title
</h3>
<ul>
<li>
Text goes here
</li>
<li>
Text goes here
<br> Text goes here
<br> Text goes here
<br> Text goes here
<br> Text goes here
<br> Text goes here
<br> Text goes here
<br> Text goes here
<br> Text goes here
<br> Text goes here
</li>
</ul>
<footer class="blockquote-footer">
Date
</footer>
</blockquote>
</div>
<div class="col">
<div id="carousel4" class="carousel slide" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carousel4" data-slide-to="0" class="active"></li>
<li data-target="#carousel4" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="image1" alt="Test image">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel4" 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="#carousel4" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>

Bootstrap carousel is filling my whole page

I would like a carousel that fills about half of the window. I've been reading through the documentation https://getbootstrap.com/docs/4.1/components/carousel/ and a following a youtube tutorial for help https://youtu.be/9cKsq14Kfsw?t=3510. My images fill the entire page plus more (when scrolled down) and I can't figure out how to make it smaller other than setting a fixed height in CSS which makes the image look squashed.
Here is my code
html, body {
width: 100%;
height: 100%;
}
.carousel-inner img {
width: 100%;
height: 100%;
}
<!-- Image carousel -->
<div id="slides" class="carousel slide" data-ride="carousel">
<!-- Carousel images -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/home-1.png" />
<div class="carousel-caption">
<h1 class="display-2">Garnet Home Inspections</h1>
</div>
</div>
<div class="carousel-item">
<img src="img/home-2.png" />
<div class="carousel-caption">
<h1 class="display-3">Service Area</h1>
<h3>I travel all over the capital Region</h3>
<button type="button" class="btn btn-outline-light btn-lg">SET UP AN APPOINTMENT</button>
</div>
</div>
<div class="carousel-item">
<img src="img/home-3.png" />
<div class="carousel-caption">
<!-- put content here -->
</div>
</div>
</div>
<!-- Carousel buttons-->
<a class="carousel-control-prev" href="#slides" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <!-- Screenreaders only -->
</a>
<a class="carousel-control-next" href="#slides" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <!-- Screenreaders only -->
</a>
</div>
Thank you in advance :)
If anyone needs more information/code please let me know.

CSS Position model link % up from bottom of image inside div

I'm not very good with CSS :(
So I have a bootstrap carousel, which obviously has images in it. I've added a div below the image, that contains a link, which opens up a modal with more info. The images resize according the size of the window, currently, my modal link is a fixed position from the bottom, so if the window is small enough, the modal link is way to high up. I need to make it a variable/percentage amount from the bottom or top of the image. Code is below.
<div id="our-story-carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/img/bg/history-2007.jpg">
<div class="more-link">
<div class="more-modal-link">
<a class="" href="#" data-toggle="modal" data-target="#our-story-modal-1">More</a>
</div>
</div>
</div>
<div class="item">
<img src="/img/bg/history-2008.jpg">
<div class="more-link">
<div class="more-modal-link">
<a class="" href="#" data-toggle="modal" data-target="#our-story-modal-1">More</a>
</div>
</div>
</div>
<div class="item">
<img src="/img/bg/history-2009.jpg">
<div class="more-link">
<div class="more-modal-link">
<a class="" href="#" data-toggle="modal" data-target="#our-story-modal-1">More</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#our-story-carousel" 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="#our-story-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
.our-story-item-image img {
margin: 0 auto;
}
.more-link {
margin: 0 auto;
text-align: center;
z-index: 10;
position: relative;
top: -255px;
background: #a29061;
height: 72px;
width: 72px;
-moz-border-radius: 41px;
border-radius: 41px;
}
.more-modal-link {
padding-top: 27px;
text-transform: uppercase;
}
.more-modal-link a {
border-top: 1px solid #331a00;
border-bottom: 1px solid #331a00;
text-decoration: none;
color: #331a00;
font-weight: bold;
}
Any help greatly appreciated.

so if it's caused of window size, try to use #media screen and (min-width: px) then set the element

How can I make a Bootstrap carousel caption stretch the full width of the carousel?

I have a carousel that's the full width of the page. Now I need to make the carousel-caption the full width of the page as well with a yellow background. The background should be the full width of the page, but the actual caption text should be centered.
This is what it should look like:
This is what it looks like now:
HTML:
<!--START CAROUSEL-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../../images/LD/desktop_hero1.png" alt="...">
<div class="carousel-caption">
Text for caption 1 here.
</div>
</div>
<div class="item">
<img src="../../images/LD/desktop_hero2.png" alt="...">
<div class="carousel-caption">
Text for caption 2 here.
</div>
</div>
<div class="item">
<img src="../../images/LD/desktop_hero3.png" alt="...">
<div class="carousel-caption">
Text for caption 3 here.
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--END CAROUSEL-->
CSS:
<style type="text/css">
.carousel-caption {
max-width: 100%;
width:100%;
background-color: #ffb81c;
}
</style>

carousel-caption class declares the div to have an absolute positioning with its position to be 15 % from left.
So you can try to override that. Here is the css:
.carousel-caption {
max-width: 100%;
width:100%;
background-color: #ffb81c;
left: 0;
}

you only need to add text-align: center becaus actually it uses the full width already
if something is floating u can use a clearfix to solve it, check this jsfidlle
title example
<div class="carousel-caption">
<h1>
Text for caption 1 here.
</h1>
</div>
.carousel-caption h1 {
max-width: 100%;
background-color: #ffb81c;
text-align:center;
}
pd. i added the h1 tag to have a better semantic structure.