Button and input color problem with bootstrap 3.3.7

Asked

Viewed 74 times

2

I have a problem with the colors of my buttons, and I haven’t figured out how to fix it yet. If you have a button with type submit doesn’t stay in the color I want.

Example with type submit:

<button type="submit" data-toggle="modal" class="btn btn-success" onclick="inserir_registo()">Enviar</button>

inserir a descrição da imagem aqui

Example without type submit, is already in the color I want:

<button type="button" data-toggle="modal" class="btn btn-success" onclick="inserir_registo()">Enviar</button>

l

Can someone explain to me why this is happening?

css twitter-bootstrap bootstrap-3
  • 2

    I believe that somewhere in your CSS you changed something you shouldn’t... maybe you put something like [type="submit" ] { background: red} or something like this in some custom.css that is calling in the document. Pq here I tested with the BS3 pattern and got to see in qq one of the cases

  • @hugocsl didn’t change anything in css and put this line <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> on my page fixed this issue, but changes the menu bar display

  • Dude you’re gonna be having a conflict problem. CSS in this case the best is to put a new class in the button and in this class put the background-color you want with ! Important to see if it solves.... It is not an option that pleases me, but without seeing the project you can’t see where the error is...

1 answer

2


As discussed in the comments, here’s a template with a basic Bootstrap 3 template, I used your button code, and it was normal, both green. And in the third btn, I put an extra class that you can see in the Style and even the btn having the class btn-success I put the class .bg with the background-color: blue and !important. So even with the color problem you can get around by CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
  .bg {
    background: blue !important;
  }
</style>
</head>
<body>
  
  <button type="submit" data-toggle="modal" class="btn btn-success" onclick="inserir_registo()">Enviar</button>

  <button type="button" data-toggle="modal" class="btn btn-success" onclick="inserir_registo()">Enviar</button>

  <button type="button" data-toggle="modal" class="btn btn-success bg" onclick="inserir_registo()">Enviar</button>
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Browser other questions tagged css twitter-bootstrap bootstrap-3

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