Couleur de la barre de navigation de Bootstrap 4

Question

Dans Bootstrap 4, comment puis-je modifier la couleur d'arrière-plan d'une barre de navigation ? Le code de twbscolor ne fonctionne pas. Je veux que la couleur de l'arrière-plan soit différente et que la couleur de la police soit blanche.

<nav class="navbar navbar-toggleable-md navbar-light bg-danger">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Jordan Baron</a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
            </li>
        </ul>
    </div>
</nav>

Answer 1

Bootstrap 5 (mise à jour 2021)

En termes de style, la barre de navigation n'a pas beaucoup changé dans Bootstrap 5. Par conséquent, la modification/le remplacement des couleurs et des styles est similaire à Bootstrap 4. Pour personnaliser les styles de contenu de la barre de navigation pris en charge...

/* change the background color */
.navbar-custom {
    background-color: #4433cc;
}

/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: #ffcc00;
}

/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: #ffbb00;
}

/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: pink;
}

S'il y a des listes déroulantes de la barre de navigation que vous voulez personnaliser...

/* for dropdowns only */
.navbar-custom .navbar-nav .dropdown-menu {
    background-color: #ddaa11;
}

/* dropdown item text color */
.navbar-custom .navbar-nav .dropdown-item {
    color: #000000;
}

/* dropdown item hover or focus */
.navbar-custom .navbar-nav .dropdown-item:hover,
.navbar-custom .navbar-nav .dropdown-item:focus {
    color: #eeeeee;
    background-color: red;
}

---

Bootstrap 4.x (mise à jour 2019)

N'oubliez pas que les substitutions CSS que vous définissez doit être la même spécificité CSS ou supérieure afin de remplacer correctement le CSS de Bootstrap.

La barre de navigation est transparent par défaut. Si vous seulement vous voulez changer la couleur de l'arrière-plan, vous pouvez le faire simplement en appliquant la couleur à l'écran de l'ordinateur. <navbar class="bg-custom"> mais n'oubliez pas que cela ne changera pas les autres couleurs, comme celles des liens, des survols et des menus déroulants.

Voici le CSS qui va changer cualquier couleurs pertinentes de la barre de navigation dans Bootstrap 4...

/* change the background color */
.navbar-custom {
    background-color: #ff5500;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
}

Démonstration : http://www.codeply.com/go/U9I2byZ3tS

---

Annulation de la barre de navigation claire ou foncée

Si vous utilisez la barre de navigation Bootstrap 4 navbar-light o navbar-dark puis l'utiliser dans les surcharges. Par exemple, pour changer les couleurs des liens de la barre de navigation...

.navbar-light .nav-item.active .nav-link,
.navbar-light .nav-item:focus .nav-link,
.navbar-light .nav-item:hover .nav-link {
        color: #ffffff;
}

---

Lorsque vous personnalisez Bootstrap, vous devez comprendre que Spécificité des CSS . Les substitutions dans votre CSS personnalisé doivent utiliser des sélecteurs aussi spécifiques que le fichier bootstrap.css. Lire la suite

---

Barre de navigation transparente

Remarquez que la barre de navigation de Bootstrap 4 (et 5) est transparent par défaut . Utilisez navbar-dark pour les couleurs d'arrière-plan foncées/gras, et utilisez navbar-light si la barre de navigation est d'une couleur plus claire. Cela aura un effet sur la couleur du texte et des couleur de l'icône de la bascule comme expliqué ici .

En rapport : https://stackoverflow.com/a/18530995/171456

Answer 2

Mise à jour 2021 - Fonctionne pour Bootstrap v5 & v4

Voici un moyen beaucoup plus simple de modifier la couleur d'arrière-plan de la barre de navigation.

Il suffit d'utiliser .navbar-dark au lieu de .navbar-light et ajoutez votre classe de couleur de fond personnalisée comme .bg-company-red

.navbar-dark rendra tous vos liens blancs.

HTML

<nav class="navbar navbar-dark bg-company-red">

Style CSS...

.bg-company-red {
    background-color: darkred !important;
}

Consultez le lien de documentation suivant pour votre version :

• Schéma de couleurs de la barre de navigation Bootstrap v5
• Schéma de couleurs de la barre de navigation Bootstrap v4

Answer 3

Je l'ai. C'est très simple. En utilisant la classe bg vous pouvez y parvenir facilement.

Laissez-moi vous montrer :

<nav class="navbar navbar-expand-lg navbar-dark navbar-full bg-primary"></nav>

Cela vous donne le bleu par défaut navbar

Si vous souhaitez changer votre couleur préférée, il vous suffit d'utiliser la balise style dans le champ nav :

<nav class="navbar navbar-expand-lg navbar-dark navbar-full" style="background-color: #FF0000">

Answer 4

Vous pouvez écrire !important devant la valeur de la propriété background-color comme ceci cela changera la couleur des liens.

.nav-link {
    color: white !important;
}

Answer 5

Si vous lisez la documentation de bootstrap 4, Jeux de couleurs il répondra à vos questions.