1

Si ejecuta el siguiente script verá que por defecto el tab / pill / nav activo tiene clase .active y por tanto el color predeterminado es azul. Dos preguntas:

1. ¿Cómo puedo cambiarle ese color activo a otro?

2. ¿Puedo aplicarle al tab / pill / nav activo clases .danger (rojo), .warning (amarillo), ...?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">



<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
  <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-expanded="true">Home</a>
  <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-expanded="true">Profile</a>
  <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-expanded="true">Messages</a>
  <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-expanded="true">Settings</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
  <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
  <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
  <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
  <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>



<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

2 respuestas 2

2

Nunca debes editar directamente la hoja de estilos css de tu bootstrap, lo que puedes hacer es crear tu hoja de estilos y acceder a la misma clase que usa bootstrap y modificar lo que necesites modificar, pero como te digo lo estarías haciendo en una hoja de estilos propia y no en la de la librería:

.nav-pills .nav-link.active,
.show>.nav-pills .nav-link{
    background: #000000 !important
}

Recomiendo el uso de !important para que siempre el navegador tome el estilo tuyo y no el de la librería como tal.

Saludos !

1
  • Perfecto! Gracias por una respuesta tan bien elaborada!
    – Lukas
    el 29 sep. 2017 a las 15:12
2

introducir la descripción de la imagen aquí

Fijate, pero te recomiendo darle otra clase o id para que no modifiques el bootstrap.css

4
  • Gracias! Si podrias copiar y pegar ese código aquí para que sirva para ¨futuras generaciones¨, te marcaré como respuesta! Gracias !
    – Lukas
    el 29 sep. 2017 a las 15:00
  • fijate la clase que estoy modificando y asi resolveras, yo siempre uso el inspeccionador y es muy util jejejej , salva
    – Naoto
    el 29 sep. 2017 a las 15:00
  • al <a> le agregue otro id en el css llamado miid
    – Naoto
    el 29 sep. 2017 a las 15:02
  • <a class="nav-link active" id="midid" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-expanded="true" style=".nav-pills .nav-link.active, .show>.nav-pills .nav-link { color: #fff; background-color: #ff00b5; } color: #fff; background-color: rgba(27, 246, 50, 0.81); ">Home</a> en el css al #id le agregue el codigo background-color: rgba(27, 246, 50, 0.81); por ejemplo
    – Naoto
    el 29 sep. 2017 a las 15:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.