<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="" style="background:white;">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" style="background:grey;" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" style="background:grey;" data-slide-to="1"></li>
<li data-target="#myCarousel" style="background:grey;" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" style="">
<div class="item active" style="height:300px;padding-left:40px;padding-right:40px;">
<div style="width:50%;float:left;text-align:center;padding:60px;">
<img src="http://2.bp.blogspot.com/-VzjWxhNbi0Y/UxiR0T8hb_I/AAAAAAAAAXA/NBtmpBKiH8I/s1600/British+cat.jpg" alt="Los Angeles" style="border-radius:50%;width:150px;height:150px;">
</div>
<div style="width:50%;float:left;text-align:center;padding:60px;">
<h3>Title</h3>
<p>This is to inform the quotations of the person This is to inform the quotations of the person This is to inform the quotations of the person
to inform the quotations of the person This is to inform the quotations of the person
</p>
</div>
</div>
<div class="item" style="height:300px;padding-left:40px;padding-right:40px;">
<div style="width:50%;float:left;text-align:center;padding:60px;">
<img src="http://imgs.abduzeedo.com/files/articles/20-beautiful-pictures-cats/Darn_Good_Looking_Cat_by_mamazmeilor.jpg" alt="Los Angeles" style="border-radius:50%;width:150px;height:150px;">
</div>
<div style="width:50%;float:left;text-align:center;padding:60px;">
<h3>Title</h3>
<p>This is to inform the quotations of the person This is to inform the quotations of the person This is to inform the quotations of the person
to inform the quotations of the person This is to inform the quotations of the person
</p>
</div>
</div>
<div class="item" style="height:300px;padding-left:40px;padding-right:40px;" >
<div style="width:50%;float:left;text-align:center;padding:60px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Chinatown_LA.JPG" alt="Los Angeles" style="border-radius:50%;width:150px;height:150px;">
</div>
<div style="width:50%;float:left;text-align:center;padding:60px;">
<h3>Title</h3>
<p>This is to inform the quotations of the person This is to inform the quotations of the person This is to inform the quotations of the person
to inform the quotations of the person This is to inform the quotations of the person
</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" style="color:grey"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" style="color:grey;"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
