I am currently utilizing the Mobirise Website Builder and am in the process of figuring out how to create a full-width Bootstrap carousel similar to the example shown at this link:
My goal is to have the carousel at the top of the screen, covering only 50-60% of the screen.
I have attempted to adjust margins and paddings, however, the functionality seems to get disrupted in the process.
Below is the HTML code for my full-screen Bootstrap carousel:
<section class="carousel slide cid-r7XrvnwwpK" data-interval="false" id="slider1-3">
<div class="full-screen">
<div class="mbr-slider slide carousel" data-pause="true" data-keyboard="false" data-ride="false" data-interval="false">
<ol class="carousel-indicators">
<li data-app-prevent-settings="" data-target="#slider1-3" class=" active" data-slide-to="0"></li>
<li data-app-prevent-settings="" data-target="#slider1-3" data-slide-to="1"></li>
<li data-app-prevent-settings="" data-target="#slider1-3" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item slider-fullscreen-image active" data-bg-video-slide="false" style="background-image: url(assets/images/1.jpg);">
<div class="container container-slide">
<div class="image_wrapper">
<div class="mbr-overlay"></div><img src="assets/images/1.jpg">
<div class="carousel-caption justify-content-center">
<div class="col-10 align-center">
<h2 class="mbr-fonts-style display-1">FULL SCREEN SLIDER</h2>
<p class="lead mbr-text mbr-fonts-style display-5">Choose from the large selection of latest pre-made blocks - jumbotrons, hero images, parallax scrolling, video backgrounds, hamburger menu, sticky header and more.</p>
<div class="mbr-section-btn" buttons="0"><a class="btn btn-success display-4" href="https://mobirise.com">FOR WINDOWS</a> <a class="btn btn-white-outline display-4" href="https://mobirise.com">FOR MAC</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item slider-fullscreen-image" data-bg-video-slide="https://www.youtube.com/watch?v=fwkKc6M60-0">
<div class="mbr-overlay"></div>
<div class="container container-slide">
<div class="image_wrapper"><img src="assets/images/2.jpg" style="opacity: 0;">
<div class="carousel-caption justify-content-center">
<div class="col-10 align-left">
<h2 class="mbr-fonts-style display-1">VIDEO SLIDE</h2>
<p class="lead mbr-text mbr-fonts-style display-5">Slide with youtube video background and color overlay. Title and text are aligned to the left.</p>
</div>
</div>
</div>
</div>
</div>
</div><a data-app-prevent-settings="" class="carousel-control carousel-control-prev" role="button" data-slide="prev" href="#slider1-3"><span aria-hidden="true" class="mbri-left mbr-iconfont"></span><span class="sr-only">Previous</span></a><a data-app-prevent-settings="" class="carousel-control carousel-control-next" role="button" data-slide="next" href="#slider1-3"><span aria-hidden="true" class="mbri-right mbr-iconfont"></span><span class="sr-only">Next</span></a></div>
</div>
And here is the CSS code for the carousel slider:
.cid-r7XrvnwwpK .full-screen .slider-fullscreen-image {
min-height: 100vh;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
.cid-r7XrvnwwpK .full-screen .slider-fullscreen-image.active {
display: -o-flex;
}
.cid-r7XrvnwwpK .full-screen .container {
width: auto;
padding-right: 0;
padding-left: 0;
}
.cid-r7XrvnwwpK .full-screen .carousel-item .container.container-slide {
width: 100%;
min-height: 100vh;
padding: 0;
}