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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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