How can I achieve this with bootstrap? - css

Question

Hello StackOverflow I have the following code, this works with bootstrap and Pixedelic camera:
<section id="slider" class="container-fluid">
<div class="row fluid">
<div id="camera_wrap_1">
<div data-src="content/images/slider1.png"></div>
<div data-src="content/images/slider1.png"></div>
<div data-src="content/images/slider1.png"></div>
</div>
</div>
The camera runs fine is the blue image, but I want to achive this boxes over the camera wrap. Like this
Image
The white boxes needs to be aligned respect 4 columns bootstrap col-md-3 but be over the content of the camera. The blue is slider1.png is part of the content of camera plugin than is a full width image.

Answer 1

Here's a example o a bootstrap carousel.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/carousel.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://3.bp.blogspot.com/-bGl8UEECI8A/UH1o5UwxvdI/AAAAAAAABEg/L0iomiHX330/s640/old+bridge.jpg" alt="Ye olde bridge">
<div class="carousel-caption">
The old bridge
</div>
</div>
<div class="item">
<img src="http://bashooka.com/wp-content/uploads/2012/09/fantasy-landscape-15.jpg" alt="Elves land">
<div class="carousel-caption">
Elves landscape
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>