Is it possible to use “rows” and “spans” inside modals in Twitter Bootstrap?

Question

I'm trying to use the modals within Twitter Bootstrap to implement a contact form.

Ideally I would like the first two fieldsets to align next to each other and the third fieldset (containing a textarea and a submit button) to occupy the full width of the modal.

I have tried to use rows and spans to make them play nicely but am not sure on the way to go about this. It seems like there isn't a total of span12 to start with.

Has anyone else achieved anything similar?

Answer 1

Yes, just put it inside the modal body using "row-fluid" class, which will adjust to available space (unless you changed these styles):

<div class="row-fluid">
<div class="span6">something</div>
<div class="span6">something else</div>
</div>

Answer 2

Here is a solution only using Twitter Bootstrap 3 classes - namely row, col-sm-6 and clearfix:

HTML

...
<div class="modal-body row">
    <div class="col-sm-6" style="border: 1px solid black;">
        <p>First column with fieldset</p>
    </div>
    <div class="col-sm-6" style="border: 1px solid blue;">
        <p>Second column with fieldset</p>
    </div>
    <div class="clearfix">
    </div>
    <div class="col-sm-12" style="border: 1px solid red;">
        <p>Row that expands the whole width of modal &ndash; text area and submit button</p>
    </div>
</div>
...

Added borders to the columns for viewability below. Note that there is also default Bootstrap padding around the <p> tag, not bordered below.

Rendered preview

If you want to look at how to structure the title or footer of the modal (before/after the ellipses in the above example), you can look at the layout of Bootstrap modals here.

Answer 3

You can do something like this

<div class="modal">
<form class="modal-form">
<div class="modal-header"></div>
<div class="modal-body"> input elements here </div>
<div class="modal-footer">
   <button type="submit" class="btn" data-dismiss="modal">Cancel</button>
   <button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
<div class="modal">

hope this helps,