title: change carousel control next and prev button v4
body: <p>I want to change crousel control next and prev image button for carousel slider v4 but when they change the color of them has low opacity , i dont know why , can you help me!!</p>
  
  <pre><code>  &lt;div id="mycarousel" class="carousel slide bg-inverse" data-ride="carousel"&gt;
                  &lt;ol class="carousel-indicators"&gt;
                      &lt;li data-target="#mycarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                      &lt;li data-target="#mycarousel" data-slide-to="1"&gt;&lt;/li&gt;
                      &lt;li data-target="#mycarousel" data-slide-to="2"&gt;&lt;/li&gt;
                  &lt;/ol&gt;
                  &lt;div class="carousel-inner" role="listbox"&gt;
                      &lt;div class="carousel-item active"&gt; &lt;img class="d-block img-fluid ml-auto mr-auto" src="assets/images/banner0.png" alt="first slide"&gt;
  
                          &lt;div class="carousel-caption"&gt;
                              &lt;h3 class="animated fadeInDownBig"&gt;Network Security &amp;&lt;/h3&gt;
                              &lt;h3 class="animated fadeInDownBig"&gt;Modern Data Center&lt;/h3&gt;
                              &lt;h3 class="animated fadeInUp"&gt;Networking Solutions&lt;/h3&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="carousel-item"&gt; &lt;img class="d-block img-fluid ml-auto mr-auto" src="assets/images/banner.png" alt="second slide"&gt;
                          &lt;div class="carousel-caption"&gt;
                              &lt;h3 class="animated fadeInDownBig"&gt;Network Security &amp;&lt;/h3&gt;
                              &lt;h3 class="animated fadeInDownBig"&gt;Modern Data Center&lt;/h3&gt;
                              &lt;h3 class="animated fadeInUp"&gt;Networking Solutions&lt;/h3&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="carousel-item"&gt; &lt;img class="d-block img-fluid ml-auto mr-auto" src="assets/images/banner3.png" alt="third slide"&gt;
                          &lt;div class="carousel-caption"&gt;
                              &lt;h3 class="animated fadeInDownBig"&gt;Network Security &amp;&lt;/h3&gt;
                              &lt;h3 class="animated fadeInDownBig"&gt;Modern Data Center&lt;/h3&gt;
                              &lt;h3 class="animated fadeInUp"&gt;Networking Solutions&lt;/h3&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
                  &lt;div class="container"&gt;
                      &lt;a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev"&gt; &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt; &lt;/a&gt;
                      &lt;a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next"&gt; &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt; &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>