Set minimum width of input field css

Question

I am new to styling. I have some input field that seems to have a fixed minimum width such that when the screen is small, the input field does not shrink anymore and goes over the border as shown below. I have tried to set input { min-width: 10px } to see if that fixed it but it didnt. I am using bootstrap 4

<div class="row">
        <div class="col-md-6">
            <h5>Start Time:</h5>
            <div class="row">
                <div class="col-xs-4">
                    <input type="number" placeholder="hour">
                </div>

                <div class="col-xs-1"> : </div>

                <div class="col-xs-4">
                    <input type="number" placeholder="minutes">
                </div>

                <div class="col-xs-3">
                    <select id="severity-dropdown">
                        <option [value]="am">am</option>
                        <option [value]="am">pm</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <h5>Stop Time:</h5>
            <div class="row">
                <div class="col-xs-4">
                    <input type="number" placeholder="hour">
                </div>

                <div class="col-xs-1">
                    :
                </div>

                <div class="col-xs-4">
                    <input type="number" placeholder="minutes">
                </div>

                <div class="col-xs-3">
                    <select id="severity-dropdown">
                        <option [value]="am">am</option>
                        <option [value]="am">pm</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

Answer 1

Try adding form-control to the input:

<input class="form-control" type="number" placeholder="minutes"/>

Answer 2

you can use media queries for this task like:

@media screen and (max-width:500px){
  input{max-width:40px;}

}