Placing content DIV on bootstrap carousel - html

Question

I am trying to place a content DIV on bootstrap carousel. So I tried it using CSS position. But still could not figure this out.
This is my HTML -
<div id="homepage-feature" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
<li data-target="#homepage-feature" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1500X600">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a>
</p>
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1500X600">
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a>
</p>
</div>
</div>
</div>
</div><!-- /.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#homepage-feature" data-slide="prev">
‹
</a>
<a class="right carousel-control" href="#homepage-feature" data-slide="next">
›
</a>
<div class="container">
<div class="red"></div>
</div>
</div><!-- /#homepage-feature.carousel -->
This is JSFIDDLE with my current code
Can anybody tell me how to fix this proble?
Thank you.

Answer 1

So something like this? http://jsfiddle.net/LzdUa/131/
I just removed the container div from around the div with class="red":
<div class="red"></div>

Answer 2

The css your applying to the red box is only positioning it inside of the container, you will need to position the container itself. And then add extra css inside of media queries to move it below the carousel on smaller screen sizes. Or you can add an extra container and hide it on large screens and show it on small screens.
Bootstrap comes with classes already defined for hiding and showing depending on the device size so it saves you creating your own media queries.
see this here http://www.bootply.com/DzwnA7zrw6# think this is what your looking for.
The bits of the code to update are
html:
<div class="container red-position hidden-sm hidden-xs">
<div class="red"></div>
</div>
<div class="container visible-sm visible-xs">
<div class="red"></div>
</div>
css:
.carousel .red-position{
position:absolute;
top:0;
right:0;
}