How do I overwrite the form-control class in Bootstrap 3 with a custom class?

Question

I am trying to override the width in the form-control class of Bootstrap 3.

Snippet:

<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 this:

.form-control {
    min-width: 0;
    width: 25px;
    color:red;
}

width never works but the color:red does. Using the developer tools in Chrome, I see where .form-control .form-inline have width:auto. As soon as I uncheck width in those classes, I get my custom class.

I have my custom css as the last file loaded, so the order should be right.

I have 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;
}

I seem to be able to override everything but the width. My form's class is form-inline.

I have tried putting the form controls in a div with col-md-2 (and xs), but it only seems to affect the label, not the input. I can never override the width:auto unless I do it inline on the control in the HTML. Removing the form-control class also allows me, as expected, to get my custom class.

EDIT: For whatever reason, the forms.less mixin is winning over the style I load last.

EDIT: The problem has to do with my specificity vs. Bootstrap's. 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 specificity I cannot find.

Answer 1

I was finally able to figure this out. My level of specificity was incorrect, and my reference was also wrong. It should have been:

.form-inline .my-form-inline
{
    min-width: 0;
    width: 25px;
    color:red;
}

It did not need to be in the correct @media section.

Answer 2

Try to add !important after width property value as:

.form-control {
    min-width: 0;
    width: 25px !important;
    color:red;
}