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()