I want to change the carousel indicators with something like this:
I have this markup for my carousel indicators:\[code\]<ol class="carousel-indicators"> <li data-target="#ShowCarousel-03" data-slide-to="0" class="active"> <h4>IMAGE1</h4><br/><h5>subtitle</h5><br/><span>+</span> </li> <li data-target="#ShowCarousel-03" data-slide-to="0" class="active"> <h4>IMAGE2</h4><br/><h5>subtitle</h5><br/><span>+</span> </li> <li data-target="#ShowCarousel-03" data-slide-to="2"> <h4>IMAGE3</h4><br/><h5>subtitle</h5><br/><span>+</span> </li> <li data-target="#ShowCarousel-03" data-slide-to="0" class="active"> <h4>IMAGE4</h4><br/><h5>subtitle</h5><br/><span>+</span> </li> </ol> \[/code\]CSS: \[code\] .carousel-indicators { position: absolute; top: 0px; left: 0px; z-index: 5; margin: 0; list-style: none; } .carousel-indicators li{ background: url(images/triangle.png) no-repeat; width:320px; height:176px; cursor: pointer; text-align:center;}\[/code\]When I resize my browser the carousel adapts to the width of the screen but the indicators are collapsing.Can someone help me with a tip on how can I make this scale also on lower resolutions like the carousel images does?Thank you!L.E: I've tried to put li elements like this: \[code\] <div class="row-fluid"> <div class="span3> <li data-target="#ShowCarousel-03" data-slide-to="0" class="active"> <h4>IMAGE1</h4><br/><h5>subtitle</h5><br/><span>+</span> </li> <div class="span3> <li data-target="#ShowCarousel-03" data-slide-to="0" class="active"> <h4>IMAGE1</h4><br/><h5>subtitle</h5><br/><span>+</span> </li> <div class="span3> <li data-target="#ShowCarousel-03" data-slide-to="0" class="active"> <h4>IMAGE1</h4><br/><h5>subtitle</h5><br/><span>+</span> </li> </div> </div>\[/code\]But it's not working.