How to remove dark part on the sides of the bootstrap Carousel

Question

I’m making a scrolling system for shows some tables using a Carousel, but the same by default gets a darker shade on the sides and even on the table itself, as it is possible to remove this color leaving only the tables and buttons ?

I’m using nothing but html and bootstrap until now

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <div class="panel panel-default col-md-8 col-md-offset-2">
        <div class="panel-heading" ss>
          <h3 class="panel-title text-center">Ficha 1 para o aluno: Y</h3>
        </div>
        <div class="panel-body">
          <table class="table table-striped table-bordered">
            <thead>
              <tr>
                <th class="text-center">Treino</th>
                <th class="text-center">1</th>
                <th class="text-center">Intervalo</th>
                <th class="text-center">%esf</th>
                <th class="text-center">FC</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>Aquecimento</th>
                <td>
                  <div class="row col-md-12 col-md-offset-0" style="background-color: aqua">
                    <div class="form-group ">
                      <select class="form-control" id="sel1">
                        <option>1x</option>
                        <option>2x</option>
                        <option>3x</option>
                        <option>4x</option>
                        <option>5x</option>
                        <option>6x</option>
                        <option>7x</option>
                        <option>8x</option>
                      </select>
                    </div>
                    <div class="form-group">
                      <select class="form-control" id="sel1">
                        <option>1x</option>
                        <option>2x</option>
                        <option>3x</option>
                        <option>4x</option>
                        <option>5x</option>
                        <option>6x</option>
                        <option>7x</option>
                        <option>8x</option>
                      </select>
                    </div>
                    <div class="form-group ">
                      <select class="form-control" id="sel1">
                        <option>10m</option>
                        <option>50mx</option>
                        <option>100m</option>
                        <option>150m</option>
                        <option>200m</option>
                        <option>300m</option>
                        <option>400m</option>
                        <option>500m</option>
                      </select>
                    </div>
                  </div>
                </td>
                <td>Intervalo</td>
                <td>%esf</td>
                <td>FC</td>
              </tr>
              <tr>
                <th>Alternado</th>
                <td>Conteúdo</td>
                <td>Intervalo</td>
                <td>%esf</td>
                <td>FC</td>
              </tr>
              <tr>
                <th>Braços</th>
                <td>Conteúdo</td>
                <td>Intervalo</td>
                <td>%esf</td>
                <td>FC</td>
              </tr>
              <tr>
                <th>Resistência</th>
                <td>Conteúdo</td>
                <td>Intervalo</td>
                <td>%esf</td>
                <td>FC</td>
              </tr>
              <tr>
                <th>Pernas</th>
                <td>Conteúdo</td>
                <td>Intervalo</td>
                <td>%esf</td>
                <td>FC</td>
              </tr>
              <tr>
                <th>Educativo</th>
                <td>Conteúdo</td>
                <td>Intervalo</td>
                <td>%esf</td>
                <td>FC</td>
              </tr>
              <tr>
                <th>Progressivo</th>
                <td>Conteúdo</td>
                <td>Intervalo</td>
                <td>%esf</td>
                <td>FC</td>
              </tr>
              <tr>
                <th>Regenerativo</th>
                <td>Conteúdo</td>
                <td>Intervalo</td>
                <td>%esf</td>
                <td>FC</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="item">




      <div class="panel panel-default col-md-8 col-md-offset-2">
        <div class="panel-heading" ss>
          <h3 class="panel-title text-center">Ficha 2 para o aluno: Y</h3>
        </div>
        <div class="panel-body">
          <table class="table table-striped table-bordered">
            <thead>
              <tr>
                <th class="text-center">Treino</th>
                <th class="text-center">1</th>
                <th class="text-center">Intervalo</th>
                <th class="text-center">%esf</th>
                <th class="text-center">FC</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>Aquecimento</th>
                <td>
                  <div class="row col-md-12 col-md-offset-0" style="background-color: aqua">
                    <div class="form-group ">
                      <select class="form-control" id="sel1">
                        <option>1x</option>
                        <option>2x</option>
                        <option>3x</option>
                        <option>4x</option>
                        <option>5x</option>
                        <option>6x</option>
                        <option>7x</option>
                        <option>8x</option>
                      </select>
                    </div>
                    <div class="form-group">
                      <select class="form-control" id="sel1">
                        <option>1x</option>
                        <option>2x</option>
                        <option>3x</option>
                        <option>4x</option>
                        <option>5x</option>
                        <option>6x</option>
                        <option>7x</option>
                        <option>8x</option>
                      </select>
                    </div>
                    <div class="form-group ">
                      <select class="form-control" id="sel1">
                        <option>10m</option>
                        <option>50mx</option>
                        <option>100m</option>
                        <option>150m</option>
                        <option>200m</option>
                        <option>300m</option>
                        <option>400m</option>
                        <option>500m</option>
                      </select>
                    </div>
                  </div>
                </td>
                <td>Intervalo</td>
                <td>%esf</td>
                <td>FC</td>
              </tr>
              <tr>
                <th>Alternado</th>
                <td>Conteúdo</td>
                <td>Intervalo</td>
                <td>%esf</td>
                <td>FC</td>
              </tr>
              <tr>
                <th>Braços</th>
                <td>Conteúdo</td>
                <td>Intervalo</td>
                <td>%esf</td>
                <td>FC</td>
              </tr>
              <tr>
                <th>Resistência</th>
                <td>Conteúdo</td>
                <td>Intervalo</td>
                <td>%esf</td>
                <td>FC</td>
              </tr>
              <tr>
                <th>Pernas</th>
                <td>Conteúdo</td>
                <td>Intervalo</td>
                <td>%esf</td>
                <td>FC</td>
              </tr>
              <tr>
                <th>Educativo</th>
                <td>Conteúdo</td>
                <td>Intervalo</td>
                <td>%esf</td>
                <td>FC</td>
              </tr>
              <tr>
                <th>Progressivo</th>
                <td>Conteúdo</td>
                <td>Intervalo</td>
                <td>%esf</td>
                <td>FC</td>
              </tr>
              <tr>
                <th>Regenerativo</th>
                <td>Conteúdo</td>
                <td>Intervalo</td>
                <td>%esf</td>
                <td>FC</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

Answer 1

Arcashaid you will need to override css in Carousel.Less and bootstrap.css

After you take the dark gradient out of the corners you will see that the navigation arrows will get little contrast for being in color #fff, so I put in #000 to help you. I also kept the background-image in case you change your mind just come back with the color

.carousel-control.left {
    background-image: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
}
.carousel-control.right {
    background-image: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
}
.carousel-control {
    color: black;
}

.carousel-control:focus, .carousel-control:hover {
    color: black;
}

This style sheet should come after the bootstrap, as below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/override-bootstrap.css">