Skip to main content
se añadieron 46 caracteres en el cuerpo
Origen Enlace
andyio
  • 593
  • 3
  • 27

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 de navegación.:

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

Alguna idea de como hacer esto?

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 de navegación.

Alguna idea de como hacer esto?

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?

Origen Enlace
andyio
  • 593
  • 3
  • 27

Modificar estilo de una clase de Bootstrap

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 de navegación.

Alguna idea de como hacer esto?