CODEWITHSUNDEEP
twitter-bootstrap
emeraldjava
emeraldjava

Reputation: 11202

Twitter Bootstrap - Horizontal Form with FieldSet Per Column

I have a form with two fieldsets and two elements in each set. I would like to layout the form so that each fieldset appears as a column.

I came across this jsfiddle which shows a form with a single fieldset and five elements which are laid out in two columns but i've been unable to tweak my own form to render correctly.

Do i need to add specific class attributes to the fieldset element for bootstrap to handle them as a column?

<div class="container">
    <form class="form-horizontal">
    <fieldset>
        <legend>Portfolio A</legend>
        <div class="col-xs-6">
            <div class="form-group">
                <label for="name" class="col-xs-4 control-label">Label A1</label>
                <div class="col-xs-8">
                    <input type="text" class="form-control" placeholder="control1" />
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-xs-4 control-label">label A2</label>
                <div class="col-xs-8">
                    <input type="text" class="form-control" placeholder="control2" />
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend>Portfolio B</legend>
        <div class="col-xs-6">
            <div class="form-group">
                <label for="name" class="col-xs-4 control-label">Label B1</label>
                <div class="col-xs-8">
                    <input type="text" class="form-control" placeholder="control1" />
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-xs-4 control-label">label B2</label>
                <div class="col-xs-8">
                    <input type="text" class="form-control" placeholder="control2" />
                </div>
            </div>
        </div>
    </fieldset>
</form>
</div>

Upvotes: 2

Views: 11778

Answers (2)

Surjith S M
Surjith S M

Reputation: 6740

You should add extra class to fieldset and then change the class name of div inside it.

Working Demo

Changed from this

<fieldset>
        <legend>Portfolio A</legend>
        <div class="col-xs-6">
        ...

to this

   <fieldset class="col-xs-6">
        <legend>Portfolio A</legend>
        <div class="col-xs-12">
        ...

I have added col-xs-6 to fieldset and col-xs-12 to the inner div.

Upvotes: 7

matthias
matthias

Reputation: 2264

You are defining <fieldset> as surrounding block elements for your columns. That way column cascading won't work. Try it the more logical way: First define your column skeleton and inside of it, define your fieldsets.

<div class="container">
    <form class="form-horizontal">
        <div class="col-xs-6">
            <fieldset>
            ....

This way it should work like you want it. Here's a quick jsfiddle.

Upvotes: 1

Related Questions