JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
height: 50vh;
}
.vcenter {
position: absolute;
height:100px;
width:50%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
left:25%;
}
.v-center {
position: absolute;
height:100px;
/*width:40%;*/
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
left:15%;
}
.borders {
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border: 2px solid #000000;
background-color: rgba(100,000,100,0.4);
}
.bg-select {
background-color: rgba(00,00,255,0.5);
}
</style>
</head>
<body>
<div class="container col-lg-10 col-lg-offset-1">
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides...