Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap Modal Dialog. Can the grid system be used within a modal context?

I have a Bootstrap modal dialog for which I want to layout the various labels and inputs. I have tried using row/column classes but they do not appear to do anything. What are my options here?

Thanks,
Doug

like image 475
dugla Avatar asked Sep 09 '25 15:09

dugla


2 Answers

I got it working ok...http://www.bootply.com/WAwE3QyUdb

Add a col to the container inside the modal-body.

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Modal header</h3>
        </div>

        <div class="modal-body">
            <div class="container col-md-12">
                <div class="row">
                    <div class="col-md-3">
                        1st col 3
                    </div>

                     <div class="col-md-3">
                         2nd col 3
                     </div>

                     <div class="col-md-3">
                         3rd col 3</div>
                     </div>
                 </div>
             </div>
         </div>
    </div>
</div>
like image 197
Tom Rudge Avatar answered Sep 13 '25 11:09

Tom Rudge


Just add the row class to your modal as per the code below and then you can divide up your modal as you wish:

<div class="modal-body row">
  <div class="col-md-8">
    <p>Column One content here ... </p>
  </div>
  <div class="col-md-4">
    <p>Column Two content here ... </p>
  </div>
</div>
like image 32
dmeehan Avatar answered Sep 13 '25 11:09

dmeehan