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

Question

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

Navigation

#1 by (1 votes)

1

I'm doing a scrolling system to show some tables using a carousel, but the default is with a darker tint on the sides and even in the table itself, how can you remove that color leaving only the tables and buttons?

I'm not using anything other than html and bootstrap so far

<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>

html html5 css css3 bootstrap-3

asked by anonymous 02.11.2017 / 21:22

1 answer

A SELECT that pulls rows from a column (string; string) Jquery plugins use different versions, how to get around it?

score 1 · Accepted Answer

Arcashaid you will need to make an override of css in carousel.less and bootstrap.css

After you take the dark gradient from the corners you will see that the navigation arrows will have little contrast because they are in the #fff color, so I put it in # 000 to help you. I also kept background-image in case you change your mind, just go 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">