How to overwrite a form control class in Bootstrap 3 with a custom class?
I am trying to override width in Bootstrap 3 form control class.
Excerpt:
<div class="col-xs-2">
<label for="input-lastname" class="">Last Name</label>
<input type="text" name="lastname" class="form-control my-form-inline" id="input-lastname" value="<?php echo isset($_GET['lastname']) ? $_GET['lastname'] : 'empty'; ?>">
</div>...
I have it:
.form-control {
min-width: 0;
width: 25px;
color:red;
}
width
never works, but color:red
does. Using the developer tools in Chrome I can see where it .form-control
.form-inline
is width:auto
. Once I uncheck width
these classes, I get my own class.
I have my custom css as the last file uploaded, so the order should be correct.
I tried:
.form-control, .my-form-inline {
min-width: 0;
width: 25px;
color:red;
}
.form-control {
min-width: 0;
width: 25px;
color:red;
}
.form-control, .form-inline, .my-form-inline{
min-width: 0;
width: 25px;
color:red;
}
It seems I can override everything but the width. My form class form-inline
.
I tried to put the form controls in divs with col-md-2
(and xs), but that only affects the label, not the input. I can never override width:auto
unless I embed it in a control in HTML. Removing the class form-control
also allows me, as expected, to get my custom class.
EDIT: For some reason, the mix.less mixin wins out in the style I load last.
EDIT: The problem has to do with my specifics versus Bootstrap. I have this inline in the header:
@media (min-width: 768px) {
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
.my-form-inline
{
min-width: 0;
width: 25px;
color:red;
}
}
But the width is still overridden by some specifics that I cannot find.
source to share