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.

+3


source to share


2 answers


Try adding !important

after width property value

like:



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

      

+8


source


I was finally able to figure it out. My level of specificity was wrong and my link was also wrong. It should have been:

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

      



Didn't need to be in the right section @media

.

+4


source







All Articles