vendredi 10 juin 2016

Twitter Bootstrap 3 Inline Form with labels


After searching everywhere i couldnt see exactly how i can design an inline form that has the following design: (using bootstrap 3 classes instead of css customizations when possible)

When the user has a wide screen:

 Form-Legend

     LabelFieldA: InputFieldA   LabelFieldB: InputFieldB   LabelFieldC: InputFieldC   <Submit Button>

When the user has a smaller screen:

Form-Legend

    LabelFieldA: InputFieldA   LabelFieldB: InputFieldB   

    LabelFieldC: InputFieldC   <Submit Button>

The idea is that the design initially puts all the fields in one line and if it doesnt fit the controls would jump to the next line, but maintaining the Label + Field together.

Also if there is a way so the spacing between each Label + Input is greater than the spacing between the Label and its Field.

And lastly if there is a way of having more vertical margin between the Label + Field when it jumps to the next line.


Aucun commentaire:

Enregistrer un commentaire