I am using the Bootstrap template customization generator to change the colours of the default states and buttons using them.
I've changed all the states correctly, but when generating a button group and using a primary button with disabled state, it is still generating a blue border which I can't seem to find an option to change in Bootstrap's generator. Code:
<a href="#" class="btn btn-primary disabled">
<strong>Title here</strong>
<br><small>Hello world!</small>
</a>
This is generating this (note the light border compared to the button on the left which has a dark border because it is not disabled):

Inspecting the element shows this:
.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover, .btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus,
.btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active, .btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active,
.btn-primary[disabled].active, fieldset[disabled] .btn-primary.active {
background-color: #428bca;
border-color: #357ebd; /* these are light blue colours */
}
I can't seem to find anywhere in the template generator that refers to @btn-primary-disabled-border or similar variations of that. I've looked through all references to disabled in the page and it doesn't seem to reference it.
Am I missing something somewhere or does this need to be a manual CSS override? I'd like to keep this to using Bootstrap's LESS compiler if possible.
Edit: here's a fiddle and here's a link to my current Bootstrap definitions
Remove the transparent border property from your .btn class like below.
.btn{
border:0px solid transparent; /* this was 1px earlier */
}
DEMO
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With