Why Isn't My Stylesheet Overwritting Bootstrap's?

I read millons of time that if you define a bootstrap class in your own CSS stylesheet you will overwrite them so your created element will have your predefined style as you want.

Solution 1:

.container-fluid .input-group .form-control{
   /* yous css*/
}

This is because the bootstrap get the .form-control with two clases and this type of selection .input-group .form-control is stronger then just .form-control

.input-group .form-control{

}

Use this website to calculate which selector is stronger .

Check this screenshot the first selectors have 3 points and the second has only two so doesn't matter where you place the first selectors are stronger than second. Every id has 100 points , classes have 10 points and tags have 1 point

Solution 2:

You should add !important with the property that is not being picked. Like:

.form-control
{
    width: 70%!important;
    border-radius: 18px!important;
    background-color: lightgrey!important;
    height: 40px;
    padding-left: 10px;
    font-size: 20px;
    color: black;
}