How to divide a Twitter bootstrap modal into 2 parts

Question

I have the following html

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
        <table>
            <tbody>
                <tr>
                    <td>
                        <div class="span2 fileupload fileupload-new pull-left" data-provides="fileupload">
                            <div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div>
                            <div> <span class="btn btn-file"><span class="fileupload-new">Select image</span>
                                <span
                                class="fileupload-exists">Change</span>
                                    <input type="file" />
                                    </span> <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>

                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="progress">
                            <div class="bar" style="width: 60%;"></div>
                        </div>
                        <button class="btn btn-mini" type="button">Upload</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>

</div>

Solution 1

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.

Solution 2

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>

Solution 3

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>

Comments

[Arthur Clemens]

You should add row-fluid to modal-body: because the row has width 100%, the content will flow out of the body container. Create a new row-fluid div inside modal-body.

[superjos]

A similar discussion can be found at this SO thread

[Todd]

I wish I found this answer an hour ago! This is much clearer - make sure to add the row class AFTER modal-body people! :)

[Brandon Clark]

This is definitely the best answer so far. You can use .row-fluid as an alternate choice of .row like @Eduardo Grajeda mention in his answer.

[Brandon Clark]

It is more ideal to use the grid system. Especially if you use a modal-lg. More than likely you will have alternate view sizes due to mobile, tablet, and etc which is the purpose of the grid components. Applying a .row class to the modal-body like @interskh suggest is currently the best practice. This answer is correct but is neglectful of Bootstraps purpose.

[Pigueiras]

@BrandonClark Totally agree, but that's why their answers have more possitive votes than mine :P

[Brandon Clark]

Just want to make sure people pay attention to those answers. I almost skipped them when researching this problem.

[JJJ]

Note that despite what the documentation (3.3.5) says you should not have class "container" or "container-fluid" anywhere in the modal, otherwise the layout will break.

[Joseph Rogers]

I was banging my head against this for what seemed like ages until I saw this answer, so simple. I just needed to add the row class to my modal-body and everything is happy. Thanks!