The parapgraph is within the caption bar, not beneath it. If you just want a one-liner description that's fine, but for something that is longer, say a full paragraph or 5+ lines, it looks clunky. Much better, IMO would be to have a separate div beneath it, but Im not sure that's possible.
On Friday, July 27, 2012 5:16:01 PM UTC-4, mbierman wrote: > > Maybe I'm missing something? How is that different than the example > here<http://twitter.github.com/bootstrap/javascript.html#carousel> > ? > > In short: > > <div class="item"> >> <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt=""> >> <div class="carousel-caption"> >> <h4>First Thumbnail label</h4> >> <p>Cras justo odio, dapibus ac facilisis in, egestas >> eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id >> dolor id nibh ultricies vehicula ut id elit.<a >> href="http://yoursite.com";>link</a></p><!-- >> you could also add a div here if needed and It works. --> >> > <div><a href="http:yoursite.com">test</a></div> > >> </div> >> </div> > > > -- > Michael > @mbierm | http://thebiermans.net | http://linkedin.com/in/michaelbierman > > > On Friday, July 27, 2012 9:28:44 AM UTC-7, Sam Spaulding wrote: >> >> My code is below. In brief, I'm wondering if it's possible to have a div >> BELOW the caption that contains text and links that shuffles with the >> images. The problem seems to be that the "active item" div only extends >> down to the caption and image, so any additional content gets overlaid. >> >> I would like to have the "description" div be below the caption and >> image, but still change with carousel, but can't figure out how to >> structure it so that this works. What about making another entire carousel >> below it, with no buttons, that responds to the clicks on the carousel >> buttons above? >> >> >> <div id="photo-carousel" class="columns"> >> <div id="myCarousel" class="carousel slide"> >> <div class="carousel-inner"> >> <div class="item active"> >> <img class = "carousel_img offset1" >> src="images/nao_big.jpg" alt="" height=75% width=75%> >> <div class="carousel-caption"> >> <h4>Social Robotics and Intelligent Cognitive >> Tutoring</h4> >> <p>Building a model of a student's internal state from >> indirect observation</p> >> </div> >> <div id="description"> >> <p> THIS IS A DEscription of the project. It goes on for a few sentences. >> Then I mention one more thing >> then its over >> </p> >> <a href src="www.xkcd.com"> this is a link to xkcd> </a> >> </div> >> </div> >> <div class="item"> >> <img class = "carousel_img offset1" >> src="images/nao_big.jpg" alt="" height=75% width=75%> >> <div class="carousel-caption"> >> <h4>Robot Trust and Irrational Decision Making</h4> >> <p>How do social behaviors influence a participant's >> willingness to take bad advice?</p> >> </div> >> </div> >> <div class="item"> >> <img class = "carousel_img offset1" >> src="images/nao_big.jpg" alt="" height=75% width=75%> >> <div class="carousel-caption"> >> <h4>Sentiment Analysis and Social Robotics</h4> >> <p>Leveraging semantic content in a conversation to >> create appropriate social behavior</p> >> </div> >> </div> >> </div> >> <a class="left carousel-control" href="#myCarousel" >> data-slide="prev">‹</a> >> <a class="right carousel-control" href="#myCarousel" >> data-slide="next">›</a> >> </div> >> </div> >> >
