Bonsoir,

J'explique mon problème, j'ai utiliser Bootstrap 4.0 pour créé une navbar responsive, cependant j'aimerais pouvoir changer la couleur du background de la navbar et 2 3 autres petit détails, mais lorsque je fais ceci sur une feuille css cela ne fonctionne pas. Comment puis-je faire ou est ce que je peux par un quelconque moyen modifier les paramètres bootstrap.

J'utilise HTML5 et CSS3 ainsi que Bootstrap 4.0, j'ai ajouter Bootstrap comme ceci: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Voici le code concerné:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">

				<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
				<span class="navbar-toggler-icon"></span>
				</button>

				<div class="collapse navbar-collapse" id="collapse_target">


					<ul class="navbar-nav">

						<li class="nav-item dropdown">
							<a class="nav-link dropdown toggle" data-toggle="dropdown" data-target="dropdown_target" href="#">Link 1
							<span class="caret"></span>
							</a>
							<div class="dropdown-menu" aria-labellebdy="dropdown_target">
							<div class="dropdown-divider"></div>
							<a class="dropdown-item" href="#">test1123</a>
							</div>
						</li>



						<li class="nav-item">
							<a class="nav-link" href="#">Link 2</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link 3</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">Link 4</a>
						</li>
					</ul>
				</nav>

Merci d'avance pour votre aide

Bonjour,

En fait dans ta page HTML tu déclare ta feuille de style personnel au dessus de celle de bootstrap et ca devrais le faire.

Ha mince,

c'est aussi pour ça que je l'ai mis au conditionnel, la version 4.0 je n'ai pas trop testé, je vais regarder çà dans la soirée si j'ai un peut de temps.

Pas au dessus mais bien en dessous. Plus c'est bas dans le fichier et plus c'est prioritaire donc il faut que tes styles perso soient appelés en dernier.

Autre source d'erreurs possibles : Bootstrap cible cet élément de manière plus précise, et donc, plus prioritaire que toi. Vérifie précisément ce que cible Bootstrap et utilise exactement le même sélecteur. 

exen a écrit:

Bonjour,

En fait dans ta page HTML tu déclare ta feuille de style personnel au dessus de celle de bootstrap et ca devrais le faire.

Pour le coup merci pour la correction Mewen.

Je viens de tester avec mon propre style ca fonctionne ca permet d'effectuer des changements.

Ouep, j'avais compris en dessous, c'est ce que j'ai fait.

Justement Mewen, j'ai essayer ceci:

navbar navbar-expand-lg navbar-dark

pour changer la couleur de fond, mais ca n'a pas fonctionné.

Sinon, comment pourrais-je voir exactement comment Bootstrap cible l'élément ? Autre que dans le code de bootstrap. J'ai vue qu'il existait un customizer pour Bootstrap 3 mais j'utilise uniquement BS 4, et je ne me souviens pas avoir vue la possibilité de changer la couleur du menu nav dessus.

Merci d'avance

Pour la couleur de fond de ta navbar c'est ecrit dans la doc.

tu prend une navbar-light à la quelle tu va rajouter un style

<nav class="navbar navbar-light" style="background-color: #9e250d;">
  <!-- Navbar content -->
</nav>

Je te colle l'url

https://getbootstrap.com/docs/4.1/components/navbar/#color-schemes

Comment ?

Mais tout simplement en utilisant l'inspecteur de ton navigateur. Il suffit de regarder sur quelle classe est appliquée la couleur et de copier-coller le sélecteur utilisé. 😉

Effectivement, j'ai pas fait attention, j'avais ajouter bg-dark qui annulé la couleur que je voulais mettre.

Code modifié: 

<nav class="navbar navbar-expand-lg navbar-dark sticky-top" style="background-color: #424558;">

Je vous remercie, et je vais pouvoir chercher en modifiant les dropdowns mtn Bonne soirée