Positioning div to botton right from css - html

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>

Related

I've made a carousel on my webpage, works fine on the computer, when I make it smaller but on mobile it stays stretched

I've made a carousel on my webpage, works fine on the computer, it follows it well when I make it smaller on the screen but on mobile it stays stretched vertically making it very long/high.
I've tried to change heights and all the other standard procedure but the confusing part is that it works so well on computer but not on mobile.
In my head that shouldn't be possible
.carousel {
max-height: 790px;
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: block !important;
}
.carousel img {
width: 100% !important;
max-height: 790px;
}
.carousel-inner {
width: 90% !important;
margin: auto !important;
}
<div style="max-width:100%" class="container">
<div class="row">
<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">
<img src="img\homeg1.jpeg" alt="First Picture">
</div>
<div class="carousel-item">
<img src="img\homeg3.jpeg" alt="Second Picture">
</div>
<div class="carousel-item">
<img src="img\homeg4.jpeg" alt="Third Picture">
</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>
</div>
</div>
All you need is the images to be responsive via the img-fluid class and you'll get a similar experience on Desktop and mobile...
I have removed your css... removed inline max-width:100% from the parent div... added img-fluid classes to the images
following code works for you?
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<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">
<img class='img-fluid' src="https://valor-software.com/ngx-bootstrap/assets/images/nature/1.jpg" alt="First Picture">
</div>
<div class="carousel-item">
<img class='img-fluid' src="https://valor-software.com/ngx-bootstrap/assets/images/nature/2.jpg" alt="Second Picture">
</div>
<div class="carousel-item">
<img class='img-fluid' src="https://valor-software.com/ngx-bootstrap/assets/images/nature/3.jpg" alt="Third Picture">
</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>
</div>
</div>

HTML: Change the Bootstrap Carousel Icon from Horizontal Bar to Circle

How do I change the Bootstrap Carousel Slideshow Icons to Circles? Currently they are Horizontal bars.
https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
*Currently this:**
Intended Goal:
Try this code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
.carousel-indicators li {
box-sizing: content-box;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
text-align: center;
margin-right: 3px;
margin-left: 3px;
text-indent: unset;
cursor: pointer;
background-color: #fff;
background-clip: unset;
border-top: 0;
border-bottom: 0;
opacity: .5;
transition: opacity .6s ease;
}
</style>
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">1</li>
<li data-target="#carouselExampleIndicators" data-slide-to="1">2</li>
<li data-target="#carouselExampleIndicators" data-slide-to="2">3</li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1489216317223-a88355bd0e38?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1474932525110-07bf2cd0de87?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1475010040281-9c4f94108f91?ixlib=rb-1.2.1&auto=format&fit=crop&w=624&q=80" 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>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

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;
}
}
}

Unable to position carousel next to aside

I am currently trying to create side bar next to my carousel, However for some reason, I can't get the carousel to center on the page while the aside is next to it. I tried using margin:auto auto but had no luck. I also tried using Justify-content:center. Anyone know why it won't move?
html:
<section id="carouselSlides" class="carousel slide container" data-ride="carousel" style="background:#979BAF; ">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carouselSlides" data-slide-to="0" class="active"></li>
<li data-target="#carouselSlides" data-slide-to="1"></li>
</ol>
<!--The slideshow-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="slideshow/sunglasses.jpg" alt="sunglasses">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="slideshow/lady.jpeg" alt="women">
</div>
<!--<div class="carousel-item">
<img src="" alt>
</div>-->
<!--Left and right controls-->
<a class="carousel-control-prev" href="#carouselSlides" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carouselSlides" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<aside class="rightSideSection container clearfix">
<header style="background: #2A2A36;"><h1 class="bold">Whats popular</h1></header><br>
<ul class="popularList">
<li>example1</li>
<li>example2</li>
<li>example3</li>
</ul>
</aside>
CSS:
#carouselSlides{
display: inline-block;
width: 700px;
justify-content: center;
}
.carousel-inner img{
}
/*right side bar*/
.rightSideSection{
background: #ffffff;
width: 280px;
float: right;
margin-top: 40px;
}
.rightSideSection h1{
font-size: 30px;
}
.popularList li{
margin-left: 20px;
}
maybe this can work for you, to align the carousel to center:
<div style="text-align: center; text-align: -webkit-center;">
<section id="carouselSlides" class="carousel slide container" data-ride="carousel" style="background:#979BAF; ">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carouselSlides" data-slide-to="0" class="active"></li>
<li data-target="#carouselSlides" data-slide-to="1"></li>
</ol>
<!--The slideshow-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="slideshow/sunglasses.jpg" alt="sunglasses">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="slideshow/lady.jpeg" alt="women">
</div>
<!--<div class="carousel-item">
<img src="" alt>
</div>-->
<!--Left and right controls-->
<a class="carousel-control-prev" href="#carouselSlides" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carouselSlides" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<div>
Here basically the "carouselSlides" is contained in a div
providing the div styles as:
div{
text-align: center;
text-align: -webkit-center;
}

Text over an image

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>