Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container">
    <div class="row">

        <div id="left" class="col-xs-12 col-sm-3 col-md-2">
            <p>Left column</p>
            <p>blah blah blah…</p>
		</div><!-- /#left -->


        <div id="center" class="col-xs-12 col-sm-6 col-md-8">
			<div id="merry-go-round" class="carousel slide">
				<!-- Wrapper for slides -->
				<div class="carousel-inner">
					<div class="item active?>">
						<img style="display:block; margin-left: auto; margin-right: auto;" src="http://lorempixel.com/output/animals-q-c-300-200-5.jpg" alt="<?php echo html($image->title()) ?>" class="img-responsive">
						<div class="carousel-caption">Slide 1</div>
					</div>
                    <div class="item">
						<img style="display:block; margin-left: auto; margin-right: auto;" src="http://lorempixel.com/output/animals-q-c-300-200-6.jpg" alt="<?php echo html($image->title()) ?>" class="img-responsive">
						<div class="carousel-caption">Slide 2</div>
					</div>
                    <div class="item">
						<img style="display:block; margin-left: auto; margin-right: auto;" src="http://lorempixel.com/output/animals-q-c-300-200-7.jpg" alt="<?php echo html($image->title()) ?>" class="img-responsive">
                    <div class="carousel-caption">Slide 3</div>
					</div>    
			<?php endforeach ?>
			<?php endif ?>
				</div><!-- /carousel-inner -->
				<!-- Controls -->
				<a class="left carousel-control" href="#merry-go-round" data-slide="prev"></a>
				<a class="right carousel-control" href="#merry-go-round" data-slide="next"></a>
			</div><!-- /merry-go-round -->
		</div><!-- /#center -->
                    
		<div id="right" class="col-xs-12 col-sm-3 col-md-2">
            <p>Right column</p>
            <h1>This is where I'm trying to put the carousel image captions :/</h1>
		</div><!-- /#right -->
    </div><!-- /.row -->
</div><!-- /.container -->

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

JavaScript

$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('#right h1').html(caption.html());
caption.css('display','none');
$(".carousel").on('slide.bs.carousel', function(evt) {
 
   
   var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index()+1) + ') .carousel-caption');
   $('#right h1').html(caption.html());
   caption.css('display','none');
});