Problems when clicking an input

Question

Good afternoon,

Sometimes I can’t click an input from a form to fill it out but in others the form works normally without any problem.

This happens sporadically and, as a rule, happens to me in Chrome but I have also tested in Edge and the same happened to me.

Does anyone know what might be and how I can prevent it from happening?

Example of a form I’m using:

<form method="post" class="centrar" action="<?= base_url('viaturas/inserir') ?>">
    <div class="row">
        <div class="col-0 col-sm-0 col-m-4 col-l-4 col-xl-0"></div>
        <div class="col-12 col-sm-12 col-m-3 col-l-2 col-xl-3 text-center font-weight-bold">
            <div class="form-group">
                <label for="kms">Numero de KM da viatura</label>
                <input type="number" class="form-control " id="kms" name="kms" placeholder="Insira o numero de KM">
            </div>
        </div>
        <div class="col-12 col-sm-12 col-m-3 col-l-2 col-xl-3 text-center font-weight-bold">
            <div class="form-group">
                <label for="data">Data</label>
                <input type="date" class="form-control " id="data" name="data" placeholder="Insira a Data">
            </div>
        </div>
        <div class="col-12 col-sm-12 col-m-3 col-l-2 col-xl-3 text-center font-weight-bold">
            <div class="form-group">
                <label for="matricula">Matricula</label>
                <input type="text" class="form-control " id="matricula" name="matricula" value="<?= $matricula ?>" readonly>
            </div>
        </div>

        <div class="col-12 col-sm-12 col-m-2 col-l-2 col-xl-3 text-center">
            <label class="batota">Botão</label>
            <button type="submit" class="btn buttonstyle form-control">Inserir</button>
        </div>
    </div>
</form>

Answer 1

Hello, your code presents some classes that do not exist in Bootstrap 4.3.1, unless you have not created them for another purpose remove them and use the ones that the framework offers, see below the Grid system used by it:

Ex: For a field you want to grab the entire screen of a large screen use col-Xl-12, so go...

Try removing classes that do not belong to the framework and adjust the columns according to what you want.

Post here if it worked :).