Customizing Bootstrap: disabled primary button border
css, html, less, twitter-bootstrap
Solution
Remove the transparent border property from your `.btn` class like below.
.btn{
border:0px solid transparent; /* this was 1px earlier */
}
DEMO
Problem
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