CODEWITHSUNDEEP
twitter-bootstrap
Pep
Pep

Reputation: 2027

Arranging entry text fields with Bootstrap in a form

I would like to put some "label + textbox" groups in a mix of horizontal and vertical arrangement. Bootstrap has the form-horizontal class, but that puts the label on the right instead of on top.

The arrangement I would like to achieve is:

First Name        Last Name
[_______________] [______________]

Company Name
[________________________________]

That is, the first two fields (First Name and Last Name) have the text box on the same line, but its labels on top, not horizontally to the left, while the third field (Company Name) appears on the second row, also with the Label on top.

Which would be the mark up to accomplish this?

Upvotes: 1

Views: 3331

Answers (2)

Shail
Shail

Reputation: 3649

You can achieve the particular form in the following way :
Jsfiddle with Bootstrap Form
See Live result in browser

screenshot of result

<form class="well span8">
  <div class="row">
    <div class="span3">
        <label>First Name</label>
        <input type="text" class="span3" placeholder="Your First Name">
        <label>Company</label>
        <input type="text" class="span3" placeholder="Company">
    </div>
    <div class="span5">
        <label>Last Name</label>
        <input type="text" class="span3" placeholder="Your Last Name">
    </div>
</div>

Upvotes: 2

Chris Hughes
Chris Hughes

Reputation: 342

As far as I know you would have to use a table to make it look like that and ensure the 'Last Name' text stays with its box. You can use the <br/> tag to separate lines.

<form class="form-inline">
<table>
    <tr>
        <td>
            <label for="fn">First Name</label>
            <br/>
            <input name="fn" type="text" class="input-small" />
        </td>
        <td>
            <label for="ln">Last Name</label>
            <br/>
            <input name="ln" type="text" class="input-small" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <label for="cn">Company Name</label><br/>
            <input type="text" class="input-large" />
        </td>
    </tr>
</table>
</form>

Upvotes: -1

Related Questions