How to change the button color of the bootstrap navbar?

Asked

Viewed 2,454 times

1

I managed to leave the blue bar but the button always turns green regardless of color

I’m using this code:

<!DOCTYPE html>

<html lang="pt-br">

<head>
<meta charset="utf-8">
<title>Site-base</title>
<link rel="stylesheet"href="css/estilo.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


</head>

<body>
<div class="principal" >
	<header><img src="IMG/intelcore.jpg" alt="some text"  width=310 height=200></header>
	<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
			<a class="navbar-brand" href="#">Home</a>
			<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
				<li class="nav-item active">
					<a class="nav-link" href="#">Computadores <span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item active">
					<a class="nav-link" href="#">Celulares <span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item active">
					<a class="nav-link" href="#">Tablets <span class="sr-only">(current)</span></a>
				</li>
			</ul>
			<form class="form-inline my-2 my-lg-0">
				<input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-label="Buscar" style="background-color:white;">
				<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Buscar</button>
			</form>
		</div>
	</nav>
	  
	<aside>
		<div class="list-group">
			<a href="#" class="list-group-item list-group-item-action active" style="height: 67px">
				Equipamentos:
			</a>
			<a href="file:///C:/Users/Cleit/OneDrive/%C3%81rea%20de%20Trabalho/Site/monitores.html" class="list-group-item list-group-item-action" style="height: 63px">Placa de vídeo</a>
			<a href="#" class="list-group-item list-group-item-action" style="height: 63px">Processadores</a>
			<a href="#" class="list-group-item list-group-item-action" style="height: 63px">Monitores</a>
			<a href="#" class="list-group-item list-group-item-action" style="height: 63px">Fonte</a>
			<a href="#" class="list-group-item list-group-item-action" style="height: 63px">Gabinete</a>
			<a href="#" class="list-group-item list-group-item-action" style="height: 63px">Mouses</a>
			<a href="#" class="list-group-item list-group-item-action" style="height: 63px">Teclados</a>
		</div>
	</aside>
	  
	<section>
		<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
				<li data-target="#carouselExampleIndicators" data-slide-to="1" class="active"></li>
				<li data-target="#carouselExampleIndicators" data-slide-to="2" class="active"></li>
			</ol>
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="IMG/rtx.jpg" class="d-block w-100" alt="RTX" height=500px>
				</div>
				<div class="carousel-item">
					<img src="IMG/gtx300.jpg" class="d-block w-100" alt="GTX300" height=500px>
				</div>
				<div class="carousel-item">
					<img src="IMG/intelcore.jpg" class="d-block w-100" alt="..." height=500px>
				</div>
			</div>
			<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
			  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
			  <span class="sr-only">Previous</span>
			</a>
			<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
			  <span class="carousel-control-next-icon" aria-hidden="true"></span>
			  <span class="sr-only">Next</span>
			</a>
		</div>
	</section>
	
	<main>
		<div class="container" style="min-width: 100%; margin: 0 auto;">
			<div class="item item1">
				<div class="card" style="width: 19rem;">
					<img src="IMG/rtxazul.jpg" class="card-img-top" style="hidth=10px;">
					<div class="card-body">
						<h5 class="card-title"></h5>
						<p class="card-text"></p>
					</div>
					<ul class="list-group list-group-flush">
						<li class="list-group-item"></li>
						<li class="list-group-item"></li>
						<li class="list-group-item"></li>
					</ul>
					<div class="card-body">
						<a href="#" class="card-link">COMPRAR</a>
						<a href="#" class="card-link">DETALHES</a>
					</div>
				</div>
			</div>
    			<div class="item item2">
				<div class="card" style="width: 19rem;">
					<img src="IMG/teclado.jif" class="card-img-top" alt="...">
					<div class="card-body">
						<h5 class="card-title"></h5>
						<p class="card-text"></p>
					</div>
					<ul class="list-group list-group-flush">
						<li class="list-group-item"></li>
						<li class="list-group-item"></li>
						<li class="list-group-item"></li>
					</ul>
					<div class="card-body">
						<a href="#" class="card-link"></a>
						<a href="#" class="card-link"></a>
					</div>
				</div>
			</div>
    			<div class="item item3">
				<div class="card" style="width: 19rem;">
					<img src="IMG/rtx.jpg" class="card-img-top" alt="...">
					<div class="card-body">
						<h5 class="card-title"></h5>
						<p class="card-text"></p>
					</div>
					<ul class="list-group list-group-flush">
						<li class="list-group-item"></li>
						<li class="list-group-item"></li>
						<li class="list-group-item"></li>
					</ul>
					<div class="card-body">
						<a href="#" class="card-link">COMPRAR</a>
						<a href="#" class="card-link">DETALHES</a>
					</div>
				</div>
			</div>
			<div class="item item4">
				<div class="card" style="width: 19rem;">
					<img src="IMG/rtx.jpg" class="card-img-top" alt="...">
					<div class="card-body">
						<h5 class="card-title"></h5>
						<p class="card-text"></p>
					</div>
					<ul class="list-group list-group-flush">
						<li class="list-group-item"></li>
						<li class="list-group-item"></li>
						<li class="list-group-item"></li>
					</ul>
					<div class="card-body">
						<a href="#" class="card-link"></a>
						<a href="#" class="card-link"></a>
					</div>
				</div>
			</div>
		</div>

	</main>
	
	<footer>

	</footer>
</div>

</body>

</html>

I saw on some sites that using the following code would change the color, but changes the style of the bar also and the button disappears:

<nav class="navbar navbar-dark bg-primary">

4 answers

2

The color of the button you must change in the tag class <button>... For example:

<button class="btn btn-primary">Buscar</button>

It would be interesting if you put all the HTML code so that we could help better.


<!DOCTYPE html>

<html lang="pt-br">

<head>
<meta charset="utf-8">
<title>Site-base</title>
<link rel="stylesheet"href="css/estilo.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


</head>

<body>
<div class="principal" >
	<header><img src="IMG/intelcore.jpg" alt="some text"  width=310 height=200></header>
	<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
			<a class="navbar-brand" href="#">Home</a>
			<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
				<li class="nav-item active">
					<a class="nav-link" href="#">Computadores <span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item active">
					<a class="nav-link" href="#">Celulares <span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item active">
					<a class="nav-link" href="#">Tablets <span class="sr-only">(current)</span></a>
				</li>
			</ul>
			<form class="form-inline my-2 my-lg-0">
				<input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-label="Buscar" style="background-color:white;">
				<button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Buscar</button>
<!-- a classe da tag acima foi alterado de success para secondary -->
			</form>
		</div>
	</nav>
	  
	<aside>
		<div class="list-group">
			<a href="#" class="list-group-item list-group-item-action active" style="height: 67px">
				Equipamentos:
			</a>
			<a href="file:///C:/Users/Cleit/OneDrive/%C3%81rea%20de%20Trabalho/Site/monitores.html" class="list-group-item list-group-item-action" style="height: 63px">Placa de vídeo</a>
			<a href="#" class="list-group-item list-group-item-action" style="height: 63px">Processadores</a>
			<a href="#" class="list-group-item list-group-item-action" style="height: 63px">Monitores</a>
			<a href="#" class="list-group-item list-group-item-action" style="height: 63px">Fonte</a>
			<a href="#" class="list-group-item list-group-item-action" style="height: 63px">Gabinete</a>
			<a href="#" class="list-group-item list-group-item-action" style="height: 63px">Mouses</a>
			<a href="#" class="list-group-item list-group-item-action" style="height: 63px">Teclados</a>
		</div>
	</aside>
	  
	<section>
		<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
				<li data-target="#carouselExampleIndicators" data-slide-to="1" class="active"></li>
				<li data-target="#carouselExampleIndicators" data-slide-to="2" class="active"></li>
			</ol>
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="IMG/rtx.jpg" class="d-block w-100" alt="RTX" height=500px>
				</div>
				<div class="carousel-item">
					<img src="IMG/gtx300.jpg" class="d-block w-100" alt="GTX300" height=500px>
				</div>
				<div class="carousel-item">
					<img src="IMG/intelcore.jpg" class="d-block w-100" alt="..." height=500px>
				</div>
			</div>
			<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
			  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
			  <span class="sr-only">Previous</span>
			</a>
			<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
			  <span class="carousel-control-next-icon" aria-hidden="true"></span>
			  <span class="sr-only">Next</span>
			</a>
		</div>
	</section>
	
	<main>
		<div class="container" style="min-width: 100%; margin: 0 auto;">
			<div class="item item1">
				<div class="card" style="width: 19rem;">
					<img src="IMG/rtxazul.jpg" class="card-img-top" style="hidth=10px;">
					<div class="card-body">
						<h5 class="card-title"></h5>
						<p class="card-text"></p>
					</div>
					<ul class="list-group list-group-flush">
						<li class="list-group-item"></li>
						<li class="list-group-item"></li>
						<li class="list-group-item"></li>
					</ul>
					<div class="card-body">
						<a href="#" class="card-link">COMPRAR</a>
						<a href="#" class="card-link">DETALHES</a>
					</div>
				</div>
			</div>
    			<div class="item item2">
				<div class="card" style="width: 19rem;">
					<img src="IMG/teclado.jif" class="card-img-top" alt="...">
					<div class="card-body">
						<h5 class="card-title"></h5>
						<p class="card-text"></p>
					</div>
					<ul class="list-group list-group-flush">
						<li class="list-group-item"></li>
						<li class="list-group-item"></li>
						<li class="list-group-item"></li>
					</ul>
					<div class="card-body">
						<a href="#" class="card-link"></a>
						<a href="#" class="card-link"></a>
					</div>
				</div>
			</div>
    			<div class="item item3">
				<div class="card" style="width: 19rem;">
					<img src="IMG/rtx.jpg" class="card-img-top" alt="...">
					<div class="card-body">
						<h5 class="card-title"></h5>
						<p class="card-text"></p>
					</div>
					<ul class="list-group list-group-flush">
						<li class="list-group-item"></li>
						<li class="list-group-item"></li>
						<li class="list-group-item"></li>
					</ul>
					<div class="card-body">
						<a href="#" class="card-link">COMPRAR</a>
						<a href="#" class="card-link">DETALHES</a>
					</div>
				</div>
			</div>
			<div class="item item4">
				<div class="card" style="width: 19rem;">
					<img src="IMG/rtx.jpg" class="card-img-top" alt="...">
					<div class="card-body">
						<h5 class="card-title"></h5>
						<p class="card-text"></p>
					</div>
					<ul class="list-group list-group-flush">
						<li class="list-group-item"></li>
						<li class="list-group-item"></li>
						<li class="list-group-item"></li>
					</ul>
					<div class="card-body">
						<a href="#" class="card-link"></a>
						<a href="#" class="card-link"></a>
					</div>
				</div>
			</div>
		</div>

	</main>
	
	<footer>

	</footer>
</div>

</body>

</html>

  • I put all the code, you’re a bit buggy but I think you can understand

  • I made the change in your code. See if you will answer.

  • Got it, thank you very much helped me a lot.

2

Face the colors are discrete in the official documentation, just u consult on the link https://getbootstrap.com/docs/4.0/components/buttons/#Outline-Buttons

inserir a descrição da imagem aqui

Code

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />


<div class="container">
  <div class="row">
    <div class="col">
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-secondary">Secondary</button>
      <button type="button" class="btn btn-success">Success</button>
      <button type="button" class="btn btn-danger">Danger</button>
      <button type="button" class="btn btn-warning">Warning</button>
      <button type="button" class="btn btn-info">Info</button>
      <button type="button" class="btn btn-light">Light</button>
      <button type="button" class="btn btn-dark">Dark</button>

      <button type="button" class="btn btn-link">Link</button>

      <button type="button" class="btn btn-outline-primary">Primary</button>
      <button type="button" class="btn btn-outline-secondary">Secondary</button>
      <button type="button" class="btn btn-outline-success">Success</button>
      <button type="button" class="btn btn-outline-danger">Danger</button>
      <button type="button" class="btn btn-outline-warning">Warning</button>
      <button type="button" class="btn btn-outline-info">Info</button>
      <button type="button" class="btn btn-outline-light">Light</button>
      <button type="button" class="btn btn-outline-dark">Dark</button>
    </div>
  </div>
</div>

0

Follow an example:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

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

According to this link. I hope it helps you.

I found this answer in stackoverflow that I think can also help you. /a/29734/72989

-1

LINK TO NAVBAR DOCUMENTATION https://getbootstrap.com/docs/4.0/components/navbar/

CODE

.navbar-inverse .navbar-nav li.active a{ 
    background-color: #6dafad;
    color: #fff;
    border-radius:
    margin: 0 0.25em;
}

.navbar-inverse .navbar-nav > li > a {
  color: #ffffff;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #d4e1e3;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #d4e1e3;
  background-color: #6dafad;
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  color: #d4e1e3;
  background-color: #6dafad;
}

Browser other questions tagged

You are not signed in. Login or sign up in order to post.