<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="col-md-8"> <!-- Indicators --> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="https://scontent.xx.fbcdn.net/v/t35.0-12/18052175_1145575975551686_1800283054_o.jpg?oh=5057c5a35c6128ba0a238323ef586ee1&oe=58FB37E0" alt="Chania"> <div class="ca hidden-xs"> <h3>Header of Slide 1</h3> <p>Details of Slide 1. Lorem Ipsum Blah Blah Blah....</p> </div> <center><h3 class="hidden-md hidden-lg hidden-xl"></h3></center> </div> </div> </div></div>

.ca { position: absolute; right: 0; top:0; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: black; text-align: center; margin-right:20px; margin-top:20px; } @media(max-width:500px){ top:inherit: }