Bootstrap Modal Dialog. Can the grid system be use

Question

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

Answer 1

You can make the Bootstrap modal responsive by resetting the container widths:

.modal-body {padding: 5px}

.modal-dialog {
@media(min-width: $screen-sm-min){
  width: 600px;
  .container {
    width: 590px;
  }
}

@media(min-width: $screen-md-min){
  width: 800px;
  .container {
    width: 790px;
  }
}

@media(min-width: $screen-lg-min){
  width: 1000px;
  .container {
    width: 990px;
  }
}
}

Answer 2

have a look bootstrap example no need to add container or container-fluid or col-* classes with modal-body or inside modal-body

<div class="modal-body">
  <div class="row">
    <div class="col-md-3">
      <p>1st col 3</p>
    </div>
    <div class="col-md-3">
      <p>2nd col 3</p>
    </div>
    <div class="col-md-3">
      <p>3rd col 3</p>
    </div>
    <div class="col-md-3">
      <p>4th col 3</p>
    </div>
  </div>
</div>

see here

Answer 3

From the docs

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

http://getbootstrap.com/javascript/#modals-grid-system

Answer 4

For Bootstrap 4 you can create a modal container with SCSS.

The .modal-container class should be added to the .modal-dialog

Variables:

$modal-container-max-widths: (
  xs: 90%,
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px,
);

Coding:

@mixin make-modal-max-widths-container-width($max-widths: $modal-container-max-widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $modal-container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
        max-width: $modal-container-max-width;
    }
  }
}
.modal-container{
   @include make-modal-max-widths-container-width();
}

Some additional CSS is recommended.

.modal-container{
  margin-left: auto;
  margin-right: auto;
  padding-left: ($spacer / 2);
  padding-right: ($spacer / 2);
}

Answer 5

Tom Rudge's answer inspired me. You don't need to make the container also be a full-width column itself which Matt Dell pointed out will fail linters.

Make the container container-fluid instead!

bootply showing col-md-12 and container-fluid side by side

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Modal with container fluid</h3>
        </div>
        <div class="modal-body">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-3">
                        <p>
                            1st col 3
                        </p>
                    </div>
                    <div class="col-md-3">
                        <p>
                            2nd col 3
                        </p>
                    </div>
                    <div class="col-md-3">
                        <p>
                            3rd col 3
                        </p>
                    </div>
                    <div class="col-md-3">
                        <p>
                            4th col 3
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

Answer 6

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>