2

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.

ThisGuyCantEven
  • 1,095
  • 12
  • 21
  • Adding your CSS in the page rather than editing bootstrap.css seems to work. [See this JSFiddle here](https://jsfiddle.net/qovx9t7g/) it seems to work. Can you please elaborate as to what is not really working from your perspective? – Ahs N May 18 '17 at 06:10

2 Answers2

2

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

J88
  • 811
  • 7
  • 20
  • Wow, making that change inline in the `.html` doc worked fine. I reverted the changes I made to bootstrap. The reason I did not make a new stylesheet is because this is really just going to be the scheme for this particular page, so I just made an inline stylesheet in the ``. Wish I could upvote because still good advice. – ThisGuyCantEven May 18 '17 at 06:15
  • Changing inline is the same as changing it in a second css file loaded later. You're also overwriting your bootstrap styles. If this helped you out you can accept this as an answer so others can use this too – J88 May 18 '17 at 06:41
  • Is it better to load bootstrap from url if they have better bandwidth/servers or nah? – ThisGuyCantEven May 18 '17 at 07:37
  • Actually most people do this because then people have bootstrap in their cache. Better.. Depends, it saves you a small amount of bandwidth and I always say if these services exist, why won't you use them? :). The advantage of this way of working in my opinion is that you just have to change the version number in your css reference instead of uploading a new version to your website. – J88 May 18 '17 at 07:47
2

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>
Rohit Kumar
  • 776
  • 3
  • 21
  • @ThisGuyCantEven check this out... You can find the classes in bootstrap.css file. – Rohit Kumar May 18 '17 at 06:47
  • Thank you Kumar, this also answered my question, sorry I can't check both. I had looked at the `btn-warning` class already, however, they did not name that very intuitively. Though it makes sense now that I know it is text I passed it over before. – ThisGuyCantEven May 18 '17 at 17:05