How make bootstrap class="form-inline" work on resolutions < 768px

Question

We are making a Google sites where we will put a form made on Bootstrap.

The width that we have to put the form is 500px;

The code its alright but the <div class="form-inline"> just work on a specific size of screen, and we need to specify that size, where should we change that?

Thank you.

            <div class="form-group">
                <div class="form-inline">
                    <div class="form-group">
                        <label class="sr-only" for="Inputtel">Telefone</label>
                        <input type="tel" class="form-control" id="Inputtel" placeholder="Telefone">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="InputCPFCNPJ">CPF ou CNPJ</label>
                        <input type="number" class="form-control" id="InputCPFCNPJ" placeholder="CPF ou CNPJ">
                    </div>
                </div>
            </div>

Answer 1

Another way to achieve the result is to force che class "form-inline" works also with the resolution < 768px adding a simple css in your project:

@media (max-width: 767px) {
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
}
@media (max-width: 767px) {
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
}

By the way, with small width windows can occur the possibility that not all your inline components can be rendered in the same row and some last components will go on the second row (if there aren't enough space).