How to divide a Twitter bootstrap modal into 2 parts

Question

I have the following html

<         


        

Answer 1

Just wanted to add that I managed to do this using Bootstrap-provided CSS. The following code worked for me:

<div class="modal-body row-fluid">
  <div class="span6">
    <!-- Your first column here -->
  </div>
  <div class="span6">
    <!-- Your second column here -->
  </div>
</div>

Answer 2

Edit: This is just a pure CSS solution, look to the answers below if you want something more bootstraptic.

---

You can use a bit of css to divide the modal body in two parts, as simple as if you do a page layout of two columns.

...
<div class="modal-body>
   <div class="first-column">
       <!-- Your first column here -->
   </div>
   <div class="second-column">
       <!-- Your second column here -->
   </div>
</div>
...

and the CSS

.first-column {
  width: 40%;
  float: left;
}

.second-column {
  width: 40%;
  float: right;
}

There is no need of using the grid system inside the modal, and probably the result will be worse probably if you try to fit it with spans.

Answer 3

Just add an answer here if you are using bootstrap 3.0. In bootstrap 3.0, row-fluid is replaced by row and span is replaced by col-md (full changed log here)

So Eduardo Grajeda's answer becomes

<div class="modal-body row">
  <div class="col-md-6">
    <!-- Your first column here -->
  </div>
  <div class="col-md-6">
    <!-- Your second column here -->
  </div>
</div>