CODEWITHSUNDEEP
twitter-bootstrapbootstrap-modal
Adam Starrh
Adam Starrh

Reputation: 6968

Including Columns Inside Bootstrap Modal Tabs

I am trying to add a set of columns inside my Bootstrap modal. The following works fine (without columns):

<div class="container">
    <div id="updateModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-type="strength">
        <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <h3 id="myModalLabel" class="text-center">Invoice <span class="itemID"></span></h3>
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <div class="tabbable">
                        <ul class="nav nav-tabs" style="display: none">
                            <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
                            <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab1">
                                <h3>Test</h3>
                                <h3>Test</h3>
                                <h3>Test</h3>
                                <h3>Test</h3>
                                <h3>Test</h3>
                            </div>
                            <div class="tab-pane" id="tab2">
                                <p>Data 2.</p>
                            </div>
                         </div>
                     </div>
                  </div>
               </div>
           </div>
      </div>
</div>

However, adding columns to the first tab throws off the formatting so that the bottom modal does not stretch to cover the contents.

<div class="tab-pane active" id="tab1">
    <div class="col-md-7">
        <h3>Test</h3>
        <h3>Test</h3>
        <h3>Test</h3>
        <h3>Test</h3>
        <h3>Test</h3>
    </div>
    <div class="col-md-5">
        <h3>Test</h3>
        <h3>Test</h3>
        <h3>Test</h3>
        <h3>Test</h3>
        <h3>Test</h3>
    </div>
</div>

I've tried to find the height determinant in the browser, but the property seems to be implicit. This seems like it should be simple enough, what am I doing wrong?

Upvotes: 0

Views: 761

Answers (1)

Robert
Robert

Reputation: 6967

You need to use the entire Bootstrap Grid Framework, not just .col-*-*. So make sure you specify your .container (recommend .container-fluid) and your .row

<div class="tab-pane active" id="tab1">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-7">
                <h3>Test</h3>
                <h3>Test</h3>
                <h3>Test</h3>
                <h3>Test</h3>
                <h3>Test</h3>
            </div>

            <div class="col-md-5">
                <h3>Test</h3>
                <h3>Test</h3>
                <h3>Test</h3>
                <h3>Test</h3>
                <h3>Test</h3>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions