0

He copiado la siguiente plantilla de Bootstrap para usarlo en mi proyecto con Vue:

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Me gustaría cambiar elementos de estilo de esta clase, como por ejemplo el background-color pero no se como.

He intentado crear un id para el nav y crear un estilo personalizado usando el scoped, pero no afecta en nada a la barra:

.navbar-light{
  background-color: aqua;
}

Alguna idea de como hacer esto?

1 respuesta 1

2

Puedes eliminar la clase bg-light y crear una con el background-color que quieras.

.navcolor{
  background-color: red;
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
    <title>Color Nav</title>
  </head>
  <body>
    <h1>Color Nav</h1>
    <nav class="navbar navbar-light navcolor">
        <div class="container-fluid">
            <span class="navbar-brand mb-0 h1">Navbar</span>
        </div>
    </nav>

    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
  </body>
</html>

1
  • 1
    Gracias Vicent! Justo lo que necesitaba.
    – andyio
    Commented el 8 oct. 2021 a las 5:06

Tu Respuesta

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

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