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>

Halfmast

Answer 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.

Scorekeeper

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 @Hispidulous suggest is currently the best practice. This answer is correct but is neglectful of Bootstraps purpose. – Maricela

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

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

Answer 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>

Hispidulous

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

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. – Maricela

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. – Frontolysis

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! – Philanthropy

Answer 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>

Inquisitor

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. – Alfons

A similar discussion can be found at this SO thread – Talkathon