Twitter Bootstrap Question posted in

Can't change inactive color of bootstrap button text – Twitter bootstrap

I am new to bootstrap,css and html, but it seems pretty friendly so far. I have some button troubles and I’m not sure what to think. Mainly, I want the text in the button to be black and then only underline on hover. I tried doing some inl ine css first, didn’t work, so then I thought “let’s try to find it in the bootstrap.css source and see change the color”, which is exactly what I did, and it worked for the hover text, but not otherwise, here are the changes I made:

.text-info{color:#31708f}a.text-info:focus,a.text-info:hover{color:#245269}

was changed to:

.text-info{color:#000}a.text-info:focus,a.text-info:hover{color:#000}

and there were not any other occurrences of text-info in bootstrap.css. If it helps at all, here is the row of the container the button is in the first column of:

<div class="row">
    <div class="col-sm-6 col-md-6 col-lg-6" >
        <div class="well"><a href="" class="btn-warning btn-block text-center text-info">Button</a></div>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-6">
                div class="well">This is the first row and second column</div>
</div>

You can tell I’m new by the text in my rows. I think the only other thing that might be relevant is that I in line overrode the color of the well. Any advice is appreciated. I tagged django because it was the only other (than twitter) bootstrap related tag not related to statistics. Coincidentally, I am just trying to prettify my ugly ass shell site, which is powered by ‘django’! Thanks in advance for any advice.

Tags:

2

Answers


  1. 0

    You can add a custom css file and load it after loading the bootstrap.css. This will override settings, i never mess with bootstrap.css because i load it from somewhere else instead of locally.

    EDIT : you could also change it inline (html wise) but this is not good practice we like seperation of concerns.

    Also the problem with bootstrap changes not beeing seen can be caching, I found a nice trick at this link

    Good luck

    Login or Signup to reply.
  2. 0

    These are the classes that control the behavior of the “btn-warning” you trying to use. 

    .btn-warning {
  color: #ffffff; /*Make the color Change Here*/
  background-color: #f0ad4e;
  border-color: #eea236;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
  color: #ffffff;
  background-color: #ed9c28;
  border-color: #d58512;
text-decoration:underline;
}

.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
  background-image: none;
}

.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
  background-color: #f0ad4e;
  border-color: #eea236;
}

    Make these changes to the html

    <div class="row">
    <div class="col-sm-6 col-md-6 col-lg-6" >
        <div class="well"><a href="" class="btn btn-warning">Button</a></div>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-6">
                div class="well">This is the first row and second column</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search