title: twitter bootstrap custom carousel indicators
body: <p>I want to change the carousel indicators with something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/AesAt.png" alt="custom  carousel indicators"></p>
  
  <p>I have this markup for my carousel indicators:</p>
  
  <pre><code>&lt;ol class="carousel-indicators"&gt;
  
  
      &lt;li data-target="#ShowCarousel-03" data-slide-to="0" class="active"&gt;
          &lt;h4&gt;IMAGE1&lt;/h4&gt;&lt;br/&gt;&lt;h5&gt;subtitle&lt;/h5&gt;&lt;br/&gt;&lt;span&gt;+&lt;/span&gt;
      &lt;/li&gt;
  
  
      &lt;li data-target="#ShowCarousel-03" data-slide-to="0" class="active"&gt;
          &lt;h4&gt;IMAGE2&lt;/h4&gt;&lt;br/&gt;&lt;h5&gt;subtitle&lt;/h5&gt;&lt;br/&gt;&lt;span&gt;+&lt;/span&gt;
      &lt;/li&gt;
      &lt;li data-target="#ShowCarousel-03" data-slide-to="2"&gt;
          &lt;h4&gt;IMAGE3&lt;/h4&gt;&lt;br/&gt;&lt;h5&gt;subtitle&lt;/h5&gt;&lt;br/&gt;&lt;span&gt;+&lt;/span&gt;
      &lt;/li&gt;
      &lt;li data-target="#ShowCarousel-03" data-slide-to="0" class="active"&gt;
          &lt;h4&gt;IMAGE4&lt;/h4&gt;&lt;br/&gt;&lt;h5&gt;subtitle&lt;/h5&gt;&lt;br/&gt;&lt;span&gt;+&lt;/span&gt;
      &lt;/li&gt;
  
                      &lt;/ol&gt; 
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><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></pre>
  
  <p>When I resize my browser the carousel adapts to the width of the screen but the indicators are collapsing.</p>
  
  <p>Can someone help me with a tip on how can I make this scale also on lower resolutions like the carousel images does?</p>
  
  <p>Thank you!</p>
  
  <p>L.E: </p>
  
  <p>I've tried to put li elements like this: </p>
  
  <pre><code> &lt;div class="row-fluid"&gt;
   &lt;div class="span3&gt;
   &lt;li data-target="#ShowCarousel-03" data-slide-to="0" class="active"&gt;
      &lt;h4&gt;IMAGE1&lt;/h4&gt;&lt;br/&gt;&lt;h5&gt;subtitle&lt;/h5&gt;&lt;br/&gt;&lt;span&gt;+&lt;/span&gt;
    &lt;/li&gt;
    &lt;div class="span3&gt;
   &lt;li data-target="#ShowCarousel-03" data-slide-to="0" class="active"&gt;
      &lt;h4&gt;IMAGE1&lt;/h4&gt;&lt;br/&gt;&lt;h5&gt;subtitle&lt;/h5&gt;&lt;br/&gt;&lt;span&gt;+&lt;/span&gt;
     &lt;/li&gt;
  
    &lt;div class="span3&gt;
   &lt;li data-target="#ShowCarousel-03" data-slide-to="0" class="active"&gt;
      &lt;h4&gt;IMAGE1&lt;/h4&gt;&lt;br/&gt;&lt;h5&gt;subtitle&lt;/h5&gt;&lt;br/&gt;&lt;span&gt;+&lt;/span&gt;
   &lt;/li&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>But it's not working.</p>