Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to divide a Twitter bootstrap modal into 2 parts

Tags:

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>
like image 289
Saurabh Kumar Avatar asked Feb 19 '13 16:02

Saurabh Kumar


People also ask

Can you open a modal within a modal?

To open a modal from another modal can be done simply by using the events that Bootstrap provides such as show. bs. modal . You may also want some CSS to handle the backdrop overlays.

How many modal window can Bootstrap support?

Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences. Modals use position: fixed , which can sometimes be a bit particular about its rendering.

How do you increase modal width?

Change the size of the modal by adding the . modal-sm class for small modals, . modal-lg class for large modals, or . modal-xl for extra large modals.

How does the modal work for Bootstrap?

Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead. Clicking on the modal “backdrop” will automatically close the modal. Bootstrap only supports one modal window at a time.


2 Answers

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>
like image 104
interskh Avatar answered Sep 22 '22 17:09

interskh


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>
like image 44
Eduardo Grajeda Avatar answered Sep 19 '22 17:09

Eduardo Grajeda