How to divide a Twitter bootstrap modal into 2 parts

Question

enter image description here

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>

score 72 · Answer 1 · answered Oct 27 '13 at 06:13

72

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>

answered Oct 27 '13 at 06:13

interskh

2,411
2
18
20

1

I wish I found this answer an hour ago! This is much clearer - make sure to add the row class AFTER modal-body people! :) – Todd Oct 02 '14 at 02:02
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 Nov 25 '14 at 17:17
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. – JJJ Jul 03 '15 at 11:41
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! – Joseph Rogers Aug 04 '15 at 13:47

score 13 · Answer 2 · answered Jun 10 '13 at 00:49

13

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>

answered Jun 10 '13 at 00:49

Eduardo Grajeda

318
2
6

1

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. – Arthur Clemens Aug 23 '13 at 23:25
A similar discussion can be found at [this SO thread](http://stackoverflow.com/questions/11848258/is-it-possible-to-use-rows-and-spans-inside-modals-in-twitter-bootstrap) – superjos Dec 10 '13 at 00:35

Pigueiras · Accepted Answer · 2014-11-25T18:09:31.337

10

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.

edited Nov 25 '14 at 18:09

answered Feb 19 '13 at 16:41

Pigueiras

17,275
9
58
83

4

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. – Brandon Clark Nov 25 '14 at 17:25
@BrandonClark Totally agree, but that's why their answers have more possitive votes than mine :P – Pigueiras Nov 25 '14 at 17:34
Just want to make sure people pay attention to those answers. I almost skipped them when researching this problem. – Brandon Clark Nov 25 '14 at 18:06

How to divide a Twitter bootstrap modal into 2 parts

3 Answers3

Linked