¿Cómo cambiar background-color de un tab / pill / nav con clase .active en bootstrap 4? – bootstrap bootstrap-4

Pregunta:


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>
Preguntado por: Lukas

Bender

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 !

introducir la descripción de la imagen aquí

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

Fuente

Related Posts:

¿Como eliminar espacio en los bordes con bootstrap? – html css bootstrap
Pregunta: Estoy intentando hacer un login con bootstrap y me surgió un problema con los bordes, cuando intento insertar un borde en el formulario se ...
No funciona JQuery en un archivo js – javascript jquery html
Pregunta: Mi problema es que no puedo usar jquery en mis archivos js, apesar que ya esta integrado en html e incluso funciona con bootstrap. Trate ...
¿Como puedo alinear verticalmente un contenido de un div con bootstrap 3? – html css bootstrap
Pregunta: Si observan el ejemplo en una resolución de 1024p podrán observar como el texto del label se extiende y el select pegado a la ...
contar sabado y domingo en un rango de fechas con datapicker – javascript bootstrap
Pregunta: Como puedo saber cuandos sabados y domingos hay en un rango de fechas 01-01-2017 & 20-01-2017 (por ejemplo), sabiendo que datapicker (bootstrap) tiene un arreglo ...
Abro un form modal en ASP.NET MVC y aparece como inactivo – asp.net bootstrap mvc
Pregunta: Buenas noches tengo una pequeña duda, estoy abriendo un form modal y cuando presiono el boton que lo abre sale como si el form modal ...
Modal no aparece completo – css bootstrap modal
Pregunta: Así aparece mi Modal: Necesito que me aparezca completo y se superponga por delante de todo. Este es mi código: <div class="row"> ...
Como cargar correctamente Jquery y Bootstrap – jquery bootstrap
Pregunta: Buenos dias a todos, estoy haciendo una web que hace uso de JQuery y de Bootstrap (incluido algunos plugins como DateTimePicker). Mas o menos ...
Ocultar en bootstrap 4 – css bootstrap-4
Pregunta: Estoy intentando ocultar un texto de la siguiente manera <ul class="col-6 col-lg-4"> <li> <i class="fa fa-briefcase" ...
Ayuda con el diseño de un DIV en HTML y Bootstrap – html bootstrap
Pregunta: Vengo diseñando la parte estática de mi sistema (la pagina web), pero estoy obteniendo un pequeño error a la hora de diseñar un div, Lo ...
¿Cómo usar JS en html? – javascript html bootstrap
Pregunta: Estoy haciendo un proyecto web en netbeans con jsp y nos pidieron darle diseño por lo que estoy usando bootstrap, entiendo como usar el ...
¿Se puede poner texto a un input type radio? – html css bootstrap
Pregunta: Esta pregunta ya tiene una respuesta aquí: ...
Agregar icono fa en una caja de texto – bootstrap
Pregunta: Buena tarde tengo el siguiente codigo html, estoy usando bootstrap 4 <div class="form-group has-feedback"> <span class="fa fa-user form-control-feedback"></span> <input type="text" class="form-control" placeholder="Escribe un nombre"> </div> Lo que quiero hacer ...
problema con imagen en el carousel de bootstrap 4 – bootstrap-4
Pregunta: tengo un problema con el carousel de bootstrap y es que las imagenes no se colocan al 100% con el carousel, tengo entendido que ...
Problema con collapse en bootstrap – bootstrap
Pregunta: <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, ...
Como enviar correos desde codeigniter con phpmailer? – php javascript bootstrap
Pregunta: Hola buenos dias veran soy muy nuevo en esto y recientemente me encargaron la tarea de mandar correos. Tengo que crear un formulario que ...

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *