CODEWITHSUNDEEP
htmltwitter-bootstrap
silvioprog
silvioprog

Reputation: 710

Input text + Select + Bootstrap + form-inline: horizontal align label

This is my first question in Stack Overflow!

So, I'm trying to align (horizontal) all labels of my form, but, without success. My HTML is:

<form class="form-inline" id="form-filtro" role="form">
    <div class="form-group">
        <label class="control-label" for="filtrar-por">Filtrar por</label>
        <select class="form-control" id="filtrar-por">
            <option value="id">ID</option>
            <option value="id">Nome</option>
            <option value="id">Nome comercial</option>
            <option value="id">CPF/CNPJ</option>
        </select>
    </div>
    <div class="form-group">
        <label class="control-label" for="filtro">Filtro</label>
        <input type="text" class="form-control" id="filtro">
    </div>
</form>

But, the result is:

enter image description here

What am I doing wrong?

Upvotes: 0

Views: 2053

Answers (1)

Paul
Paul

Reputation: 1502

I went to the bootstrap site and pasted your form code directly over the top of the example form-inline demo and things worked fine.

I did however encounter an issue if I manually styled the form to restrict it's maximum width. It looks like your form may not have enough room to display and so the label is wrapping.

Check the styles on the form in your stylesheet, or on the containing element to see if something is restricting the size.

It would also help if you posted a minimalist reproduction of your issue. ;-)

Upvotes: 1

Related Questions