CHALLENGE
- Is there a way to make the carousel height 100% of the screen?
- How can I vertically center the carousel-caption?
- How can I align the carousel-caption and carousel-indicators at the same level?
I'm struggling with this issue, any help would be appreciated.
Here is the code snippet I've been working on:
html,
body{
height: 100%;
}
.carousel-caption{
top: 60%;
transform: translateY(-50%);
}
.carousel-indicators li{
height: 72px !important;
border-radius: 0px !important;
width: 192px !important;
background: url(http://ebitfactory.se/wp-content/uploads/2016/11/photo-1465056836041-7f43ac27dcb5-1920x720.jpeg) !important;
}
.carousel-indicators li:hover{
transform: scale(1.02);
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<main role="main">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"><img data-slide-to="0" data-target="#myCarousel" src="http://ebitfactory.se/wp-content/uploads/2016/11/photo-1465056836041-7f43ac27dcb5-1920x720.jpeg" alt="" width="192" height="72"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner h-100">
<div class="carousel-item active">
<img src="https://i.imgur.com/wnZPRGU.jpg" alt="" width="100%">
<div class="container align-middle">
<div class="carousel-caption text-left">
<h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://i.imgur.com/wnZPRGU.jpg" alt="" width="100%">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://i.imgur.com/wnZPRGU.jpg" alt="" width="100%">
<div class="container">
<div class="carousel-caption text-right">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id bibh ultriplesythe vehicle across the age your lobortis.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>Any assistance on this matter would be greatly appreciated!