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

css, html, twitter-bootstrap

Solution

in bootstrap 3 you can use the grid options to do that. It is right that you want the inputs in one line? So you can solve your problem with col-xs-6. or you can use smaller input with col-xs-4. test it ;)

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

Problem

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> ```

Original source