How to display previous and next images with a Bootstrap carousel - html

The effect I'm looking for can be seen in the following image, it is a carousel with 3 images.
How can I make the bootstrap carousel show the left and right images with an opacity of 0.7?
The following is my carousel template.
<div class="col-md-10 center-block">
<img id="logo" src="./img/yoox_group.png" alt="yoog group" />
<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" role="listbox">
<div class="item active">
<img src="./img/carousel/carousel-001.jpg" alt="..." />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="./img/carousel/carousel-002.jpg" alt="..." />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="./img/carousel/carousel-003.jpg" alt="..." />
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<img id="arrowleft" src="./img/arrow_left.png" />
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<img id="arrowright" src="./img/arrow_right.png" />
<span class="sr-only">Next</span>
</a>
</div>
</div>
#arrowleft {
background-color: #FFF;
padding: 10px 8px;
position: absolute;
margin-left: -95px;
top: 45%;
z-index: 5;
display: inline-block;
}
#arrowright {
background-color: #FFF;
padding: 10px 8px;
position: absolute;
margin-left: 67px;
top: 45%;
z-index: 5;
display: inline-block;
}

Expanding on this answer to another question, if you add the following css to your code it will provide the effect you're looking for.
We basically have to expand .carousel-inner to be larger than .carousel, then center it and hide the overflow of .carousel.
To obtain the opacity effect, we expand the size of the previous and next arrow containers, then set a translucent white background.
Bootstrap >= 3.3.0
In Bootstrap version 3.3.0 there was a change in the CSS which invalidated the previous method. So this is the current method.
(Demo)
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 150%;
left: -25%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left,
.carousel-control.right {
background: rgba(255, 255, 255, 0.3);
width: 25%;
}
Bootstrap < 3.3.0
(Demo)
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 150%;
left: -25%;
}
.carousel-inner .active.left {
left: -33%;
}
.carousel-inner .next {
left: 33%;
}
.carousel-inner .prev {
left: -33%;
}
.carousel-control.left, .carousel-control.right {
background: rgba(255, 255, 255, 0.3);
width: 25%;
}

Related

Media query to shrink Bootstrap carousel

I am using Bootstrap version 4.0.0-beta and I am using the carousel function. I have configured it perfectly as to how I need it when I view it on my monitor. (1920 x 1200) but would like to change it's height depending on the users monitor, for example 1920 x 1080. I have given my Carousel a height of 32rem but would like to decrease that size if a user is on a smaller screen like I said. I believe a media query is what I need but I have tried and can't figure it out. Can anyone shine some light on this please?
Thanks.
Managed to solve it on my own. Just used this.
#media screen and (max-height: 1000px) {
.carousel-item {
height: 24rem;
}}
Please try the sample below and let me know if its worked.
.img-responsive,
.thumbnail>img,
.thumbnail a>img,
.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
display: block;
width: 100%;
height: auto;
}
.carousel-inner {
border-radius: 15px;
}
.carousel-caption {
background-color: rgba(0, 0, 0, .5);
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
padding: 0 0 10px 25px;
color: #fff;
text-align: left;
}
.carousel-indicators {
position: absolute;
bottom: 0;
right: 0;
left: 0;
width: 100%;
z-index: 15;
margin: 0;
padding: 0 25px 25px 0;
text-align: right;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
.carousel-containers {
padding: 10px 0;
}
.carousel-containers {
background-color: #fff;
color: #555;
}
#media screen and (min-width: 768px) {
.carousel-containers {
padding: 1.5em 0;
}
}
#media screen and (min-width: 992px) {
.container {
max-width: 930px;
}
}
<div class="carousel-containers">
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
<div class="item">
<img src="http://placehold.it/800x400" alt="...">
<div class="carousel-caption">
<h2>Heading</h2>
</div>
</div>
</div>
<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>
</div>
</div>

Bootstrap add white space to sides of carousel

I'm trying to get get some padding to sides of Twitter Bootstrap slider.
I'm using plain example codes from bootstrap sides with little modifications.
In bellow image you can see what I try to mean. Slider is right now 100% of page width , but I try get some darker are to show on sides (60% of page width.) So it should be left 20% middle 60% and right side 20%.
HTML:
<header id="karuselli" class="carousel slide row" >
<ol class="carousel-indicators">
<li data-target="#karuselli" data-slide-to="0" class="active"></li>
<li data-target="#karuselli" data-slide-to="1"></li>
<li data-target="#karuselli" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image:url('https://placehold.it/1900x1080&text=Slide One');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placehold.it/1900x1080&text=Slide Two');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placehold.it/1900x1080&text=Slide Three');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<a class="left carousel-control" href="#karuselli" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#karuselli" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
SCSS:
$karusellikorkeus : 50%;
$paneelikorkeus : 25px;
$menuValikkoYksi : 50%;
.menuValikkoYksi {
margin-right: 20%;
}
html,
body {
height: 100%;
background-color: #8c8c8c;
}
.carousel {
height: $karusellikorkeus;
}
.carousel-control.left, .carousel-control.right {
background-image: none
}
.item,
.active,
.carousel-inner {
height: 100%;
}
.body-top-padding {
padding-top: $paneelikorkeus + 90px;
}
.marginaali {
margin-top: $paneelikorkeus;
#include vp-background-size(cover);
}
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
hr {
color: red;
background-color: red;
padding: 2px 2px 2px 2px ;
}
footer {
margin: 50px 0;
}
Try this code
.carousel {
height: 50%;
width: 60%;
margin: 0 auto;
}
DEMO

bootstrap carousel slider - move only the slider, not content too

.carousel {
position: relative;
height: 500px;
.carousel-inner .item {
height: 500px;
}
.carousel-indicators > li {
margin: 0 2px;
background-color: $maincolor;
border-color: $maincolor;
opacity: .7;
&.active {
width: 10px;
height: 10px;
opacity: 1;
}
}
}
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
-webkit-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
-o-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.logo{
margin-bottom:-5%;
width:300px;
}
}
.btn {
&.btn-lg {
padding: 10px 40px;
}
&.btn-hero {
color: #f5f5f5;
background-color: $maincolor;
border-color: $maincolor;
outline: none;
margin: 20px auto;
&:hover, &:focus {
color: #f5f5f5;
background-color:$secondcolor;
border-color: $secondcolor;
outline: none;
margin: 20px auto;
}
}
}
.carousel .slides {
.slide-1, .slide-2, .slide-3 {
height: 500px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.slide-1 {
background-image: url(http://i.imgur.com/CK3d6nV.jpg);
}
.slide-2 {
background-image: url(http://i.imgur.com/SlHr4zn.jpg);
}
.slide-3 {
background-image: url(http://i.imgur.com/OAMaVRo.jpg);
}
}
#media screen and (min-width: 980px) {
.hero {
width: 980px;
}
}
#media screen and (max-width: 640px) {
.hero h1 {
font-size: 4em;
}
}
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
<div class="hero">
<hgroup>
<img class="logo" src="images/Logo.png" alt="LOGO">
<h3>Lorem ipsum dolor sit amet</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">Lorem</button>
</div>
</div>
<div class="item slides">
<div class="slide-2"></div>
</div>
<div class="item slides">
<div class="slide-3"></div>
</div>
</div>
</div>
I am using bootstrap carousel.I am also using Scss to my code.I want to make only the slides to move as they do, from right to left, but not content from the class too.I want that content to stay in place all the time.How can I do it ?
I hope i got your question right:
the standard bootstrap with an static caption:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
height: 500px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- start -->
<div class="carousel-caption">
<h3>Headline</h3>
<p>Tex Tex Tex Text.</p>
</div>
<!-- END -->
<div class="item active">
<img src="http://i.imgur.com/CK3d6nV.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://i.imgur.com/SlHr4zn.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://i.imgur.com/OAMaVRo.jpg" alt="Flower" width="460" height="345">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
But you want to use your classes and no image tags:
then you cant use emtpy divs. Use span instead.
html:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
height: 500px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-caption">
<div class="hero">
<hgroup>
<img class="logo" src="images/Logo.png" alt="LOGO">
<h3>Lorem ipsum dolor sit amet</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">Lorem</button>
</div>
</div>
<div class="item slides active">
<span class="carussel slide slide-1"></span>
</div>
<div class="item slides">
<span class="carussel slide slide-2"></span>
</div>
<div class="item slides">
<span class="carussel slide slide-3"></span>
</div>
</div>
<!-- Left and right controls -->
</div>
</div>
</body>
</html>
css part
.carousel {
position: relative;
height: 500px;
.carousel-inner .item {
height: 500px;
}
.carousel-indicators > li {
margin: 0 2px;
background-color: $maincolor;
border-color: $maincolor;
opacity: .7;
.active {
width: 10px;
height: 10px;
opacity: 1;
}
}
}
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
-webkit-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
-o-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.logo{
margin-bottom:-5%;
width:300px;
}
}
.btn {
&.btn-lg {
padding: 10px 40px;
}
&.btn-hero {
color: #f5f5f5;
background-color: $maincolor;
border-color: $maincolor;
outline: none;
margin: 20px auto;
&:hover, &:focus {
color: #f5f5f5;
background-color:$secondcolor;
border-color: $secondcolor;
outline: none;
margin: 20px auto;
}
}
}
.item .slides, .slide-1, .slide-2,.slide-3{
display:inherit;
height:500px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.slide-1 {
background-image: url(http://i.imgur.com/CK3d6nV.jpg);
}
.slide-2 {
background-image: url(http://i.imgur.com/SlHr4zn.jpg);
}
.slide-3 {
background-image: url(http://i.imgur.com/OAMaVRo.jpg);
}
}
#media screen and (min-width: 980px) {
.hero {
width: 980px;
}
}
#media screen and (max-width: 640px) {
.hero h1 {
font-size: 4em;
}
}
And here you could see it live:
http://codepen.io/anon/pen/pNRrPm
Why don't you just have the content you want to be in a seperate div positioned absolutely in the middle of the screen and give it a higher z-index? then it wont go anywhere.
Place <div class="hero"></div>outside of carousel item , make it absolute positioned.
<div style="position:relative">
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
</div>
<div class="item slides">
<div class="slide-2"></div>
</div>
<div class="item slides">
<div class="slide-3"></div>
</div>
</div>
<div class="hero">
<hgroup>
<img class="logo" src="images/Logo.png" alt="LOGO">
<h3>Lorem ipsum dolor sit amet</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">Lorem</button>
</div>
</div>

Styling bootstrap carousel indicators

I'm trying to get the default bootstrap carousel indicators to be very thin yellow lines stuck at the bottom as shown below.
I got them to be at the bottom of the page but I can't seem to change them into rectangles or change their color.
HTML
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
CSS
.carousel-indicators {
margin: 0px;
height: 0px;
}
.carousel-indicators ol {
width: 100%;
}
.carousel-indicators li {
height: 3px !important;
border-radius: 0px !important;
width: 25%;
}
Something like this? Note that the width is not totally accurate because I just made it 33%.
.item img {
width: 100%;
height: auto
}
.carousel {
position: relative;
width: 200px;
height: 100px;
}
ol.carousel-indicators {
position: absolute;
bottom: 0;
margin: 0;
left: 0;
right: 0;
width: auto;
}
ol.carousel-indicators li,
ol.carousel-indicators li.active {
float: left;
width: 33%;
height: 10px;
margin: 0;
border-radius: 0;
border: 0;
background: transparent;
}
ol.carousel-indicators li.active {
background: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/200x100" alt="Slide 1">
<div class="carousel-caption">
Slide 1
</div>
</div>
<div class="item">
<img src="http://placehold.it/200x100" alt="Slide 2">
<div class="carousel-caption">
Slide 2
</div>
</div>
<div class="item">
<img src="http://placehold.it/200x100" alt="Slide 3">
<div class="carousel-caption">
Slide 3
</div>
</div>
</div>
<a class="left carousel-control" href="#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="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Great css! I played with it to come up with ball indicators in half-white and the active indicator in yellow.
ol.carousel-indicators {
position: absolute;
bottom: 5px;
margin: 0;
left: 0;
right: 0;
width: auto;
}
ol.carousel-indicators li, ol.carousel-indicators li.active {
width: 1rem;
height: 1rem;
margin: 0;
border-radius: 50%;
border: 0;
background: transparent;
}
ol.carousel-indicators li {
background: rgba(255,255,255,0.39);
margin-left: .5rem;
margin-right: .5rem;
}
ol.carousel-indicators li.active {
background: yellow;
}
i have just wrote similar code for myself,
i think it will help you a little bit more.
by using Flex layout you can similarly stretch indicators
without worrying about their width
flex-grow:1; makes this job
https://codepen.io/ophiuch/pen/Jzowbo
.carousel /*slider */
{
position: relative;
}
.carousel .carousel-indicators /* indicator wrapper*/
{
position: absolute;
bottom: 0;
left:0px;
width: 100%;
margin: 0;
left: 0;
right: 0;
width: 100%;
display: flex; /* this is for indicators */
}
#headcarousel_container .carousel-indicators li /* indicators*/
{
flex-grow: 1; /* make all indicator li similarly stretched */
height: 40px;
border-radius: 2px;
}
#headcarousel_container .carousel-indicators li.active
{
background-color:rgba(251,222,87,0.5) ;/* changes indicators color when it is active*/
}
.carousel .carousel-inner .item img
{
width: 100%;
height: 100vh;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!--slider -->
<div class="container-fluid" id="headcarousel_container" style="padding: 0;">
<div id="headcarouselid" class="carousel slide" data-ride="carousel">
<!-- indicators -->
<ul class="carousel-indicators">
<li class="active" data-target="#headcarouselid" data-slide-to="0"></li>
<li class="" data-target="#headcarouselid" data-slide-to="1"></li>
<li class="" data-target="#headcarouselid" data-slide-to="2"></li>
<li class="" data-target="#headcarouselid" data-slide-to="3"></li>
<li class="" data-target="#headcarouselid" data-slide-to="4"></li>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2014/07/28/20/39/landscape-404072_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2018/08/23/07/35/thunderstorm-3625405_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2017/09/08/20/29/chess-2730034_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2018/05/30/15/31/rustic-3441673_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control left" href="#headcarouselid" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#headcarouselid" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</body>
</html>
This snippet changes prev and next Carousel icon controls for library react-bootstrap :
& span.carousel-control-prev-icon, & span.carousel-control-next-icon{
background-color: black;
}
Yeah, only the background. The icon itself is an xml image so couldn't find a way to change the colors. :/

how to align an image at the bottom of a viewport div inside bootstrap carousel

i'm working on bootstrap 2.3.2 and i want to position an image at the bottom of a viewport div, but unable to do so.i want that the secondlayer image will remain at the bottom of viewport div in every device. How can i achieve this.
Here is my code for carousel:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="bgImage">
<img src="http://placehold.it/1280x600" alt="First slide">
</div>
<div class="header-text">
<div class="text-center">
<div class="row-fluid">
<div class="span6 offset3">
<div class="firstlayer">
<img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-text.png">
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="secondlayer">
<img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-bottomImage01.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Here is my CSS:
.carousel-indicators .active {
background-color: #2980b9;
}
.carousel-inner .item .bgImage img {
width: 100%;
min-height: 100vh;
}
.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 Header Styles */
.header-text {
position: absolute;
top: 20%;
left: 1.8%;
right: auto;
width: 96.66666666666666%;
color: #fff;
}
.text-center {text-align:center;}
.firstlayer {margin-top:180px;}
.secondlayer {margin-top:175px;}
To get the secondlayer div positioned at the bottom of the viewport, it has to be positioned absolutely. See the revised code of your example:
.carousel-indicators .active {
background-color: #2980b9;
}
.carousel-inner .item .bgImage img {
width: 100%;
min-height: 100vh;
}
.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 Header Styles */
.header-text {
position: absolute;
top: 20%;
left: 1.8%;
right: auto;
width: 96.66666666666666%;
color: #fff;
}
.text-center {text-align:center;}
.firstlayer {margin-top:180px;}
.secondlayer {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.secondlayer img {
max-width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="bgImage">
<img src="http://placehold.it/1280x600" alt="First slide">
</div>
<div class="header-text">
<div class="text-center">
<div class="row-fluid">
<div class="span6 offset3">
<div class="firstlayer">
<img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-text.png">
</div>
</div>
</div>
</div>
</div>
<div class="secondlayer">
<img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-bottomImage01.png">
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>